目前项目的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左右。
网友评论