bwin官网升级版
当前位置: 首页 > bwin官网升级版
关于Webpack在金鹰系统中的应用
返回

综述:


防控中心在金鹰系统各大子平台中均使用了Webpack作为前端构建工具,那么Webpack是如何解决前端开发过程中组件化、模块化和单文件引入的需求呢?一起来看看。

互联网技术日新月异,前后端分离开发已经不是新鲜事,前端技术方面也逐渐工程化,模块化,出现了许多便利且强大的工具。防控中心在金鹰系统各大子平台中均使用了Webpack作为前端构建工具。那么Webpack是如何解决前端开发过程中组件化、模块化和单文件引入的需求呢?一起来看看。

一、什么是Webpack?

Webpack就是前端模块化打包工具。简单来说,其理念就是一切皆模块化,把大量的js(网页行为)、css(网页表现)等文件放在一个总入口文件,Webpack 就会把引入的文件根据对应的关系合并成一个 bundle.js(打包后的脚本代码文件),然后将打包后的 index.html(主页面文件)引入 bundle.js就可以了。除了 css、js还有图片、字体、html模板都可以模块化打包。

如下图:

二、为什么要将所有资源放在一个文件内?

网页渲染的时候,加载的东西越少,响应的也就更快,网页的加载速度就能快好多,有时为了优化性能,我们会把资源都合并到一个文件内,导致这个文件会很大,往往会出现两个问题:

一是当项目庞大的时候,不同页面不能做到按需加载,而且将所有的资源一并加载,耗费时间过长,性能反而降低;二是导致依赖库之间关系混乱,当项目越来越大时,会变得难以维护。

但利用 Webpack就能很好地解决上述两个问题,Webpack 有同步和异步两种加载方式,正确配置后,可以进行按需加载,在项目庞大时提升加载性能,也能较好地进行维护。

三、为什么使用Webpack ?

1、对模块化规范CommonJS(应用程序使用的API) 、AMD(异步模块代码)、CMD(通用模块代码)支持性友好。

2、形成项目依赖树,每个依赖都可拆分成一个模块,进行按需加载。

3、有强大的插件系统,可以实现代码压缩、分包、模块热替换等,自定义模块等自动化工作。

4、开发配置快速高效。是前端目前最主流的模块化打包工具。

总的来说,打包是Webpack最核心的功能,既保留了单个模块的可维护性,又减少了页面的http(超文本传输协议)请求,减少了页面加载时间,从而增加了页面的显示速度,让整个应用的体验更好。

本文内容为原创,转载请注明出处!

粤公网安备 44010602001922号