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