webpack打包优化

背景

最近在做项目的过程中，发现项目打包的时间特别长，在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