webpack打包优化
来源:互联网 发布:淘宝买东西警察还查吗 编辑:程序博客网 时间:2024/06/07 19:30
背景
最近在做项目的过程中,发现项目打包的时间特别长,在npm start
的时候,需要耗费大概70s的时间,项目使用的webpack1+babel +react+redux,以及其他用到的第三方类库。于是接手了这样一个任务:对项目的webpack打包做优化。
其实优化主要设计两方面的任务:
1. 打包时间
2. 打包后的文件体积
在打包时间上,项目中已经使用了external
的形式,将react
react-dom
等固定不变的库分开打包,在index
页面作为静态资源引入。在经过多方的调研后,尝试应用了DLL
和happyPack
,但是并未取得明显的效果。下面主要分析下,在文件体积上的优化过程:
分析工具 webpack-bundle-analyzer
正所谓工欲善其事,必先利其器。在调研过程中,发现了一款神器,就是webpack-bundle-analyzer
这是一个webpack打包插件,应用插件后,可以让我们清楚的看到打包后的文件内容,大小及其数量,从而分析得出针对性的优化方案。
具体的使用介绍看Github就可以了
优化之前
首先我们来看一下未优化之前,项目打包之后的文件详情:
通过上图,我们可以看到,项目在打包之后,生成了多个chunk
文件,其实这并没有问题,问题是,在多个chunk内,我们发现了好多相同的代码,如lodash等,被重复打包,这无疑增加了整体打包后的文件体积。
下面是文件打包之后的大小详情:
优化
好了,我们已经发现了问题所在,接下来采取针对性措施解决就可以了,
对于webpack公共模块提取,有一款这样的插件:CommonsChunkPlugin
webpack官方文档有其详细的介绍和使用场景 webpack
接下来,我们将如下的公共模块提取出来'recharts', './src/components/pageBuilder/ElementCollection','react-color
,并应用CommonsChunkPlugin
插件,再打包之后,文件详情如下:
单个chunk文件相比之前,小了很多,其中的公共模块,被打包放到了common.bundle.js
。在index
页面中,我们需要将common.boudle.js
和main.boudle.js
引入
项目引入了自行封装的
talent-core
,在路由配置上,会让webpack根据路由,打包为多个chunk文件,在切换页面的时候,按需加载不同的chunk,这也是项目优化的一个点
Reference
segmentfault
- webpack打包优化
- 一次优化webpack打包的经历
- Webpack 打包优化之体积篇
- Webpack 打包优化之体积篇
- 【视频】webpack打包机制及调试优化
- Webpack 打包优化之体积篇
- Webpack 打包优化之速度篇
- webpack打包
- Webpack打包
- webpack 打包
- webpack打包
- webpack打包
- Webpack打包后体积过大的优化思路
- webpack 项目打包 (build) 速度优化 --- Dll 方式
- webpack优化
- 打包利器webpack
- 打包利器webpack
- React+Webpack打包配置
- Horde3D——基于C++编写的3D渲染引擎
- android技术篇(二)解锁System分区
- 比较运算符compareTo()、equals()、==之间的区别
- 常对象成员
- 实现T1线程执行后再执行T2线程,之后再执行T3线程
- webpack打包优化
- Nor Flash、Nand Flash和eMMC的区别
- Easy AR初级开发教程
- 练习
- 谈谈分词(上)
- 深度学习(二)
- thinkphp开发总结(五)——mongodb的一些操作
- 商品展示
- win7 X64 vs2015 编译opencv-3.2.0 + contrib-3.2.0 + cuda8.0