webpack优化日记

目前项目的webpack情况如下：
react+react-route+babel+eslint+webpack，在webpack-dev环境下使用sourcemap的打包

在没有优化之前

整体打包数据如下：

• 第一次打包时间43698ms

• rebuild小包12.12.js的时间为15949ms

• 具体打包图片可以如下所示：

  
  
  

  image.png

主要的问题：

• 第三方依赖全部存在app.js文件中，
• 在rebuild的过程中， app.js和12.12.js都重新打包，但是我们只是改动了12.12.js的代码，

优化第一步

• 将第三方插件单独打包出来，将webpack的清单（manifest，存在于app.js中，随着每次打包的hash值会发生变化，导致app.js重复打包）单独打包出来
  整体打包数据如下：

• 第一次打包时间54517ms

• rebuild小包12.12.js的时间为14212ms

• 具体打包图片可以如下所示

  
  
  

  image.png

存在的问题：
在rebuild的过程中，12.12.js还是包含了第三方的依赖库。

优化第二步

• 将12.12.js中的node_modules模块单独取出来（如下45.45.js模块）
  整体打包数据如下：

• 第一次打包时间49162ms

• rebuild小包12.12.js的时间为4483ms

• 具体打包图片可以如下所示

  
  
  

  image.png

如何进一步进行优化呢？

对于目前rebuild的还是存在4-5秒，那么就分析一下，到底还能不能再 进行优化呢？要解答这个问题，就需要分析一下，具体这个4-5秒的时间都花在了哪里。

• 首先，将soucemap功能关闭，发现rebuild的时间为：3032ms，所以这里面有1秒钟的时间花在了soucemap中去了

• 其次，将eslint检查代码的功能关闭，发现rebuild的时间为：1530ms，所以这里面有1.5秒的时间花在了eslint中去了

• 将热切换模块功能关闭，发现rebuild的时间为：1233ms，所以这里面有0.3秒的时间花在了hot-reload当中去了

• 在所剩下的1233ms中，还有react-hot-loader，babel-loader，css-loader，sass-loader，postcss-loader等loader的解析，热切换模块功能的运行，所以所花的时间不算很多

再次进行优化

• 将soucemap功能改变：将devtool: source-map改为devtool:cheap-module-eval-source-map
• 将eslint-loader设置：cache:true

最后的rebuild时间大概维持在2~3s左右。