目前项目的webpack情况如下:
react+react-route+babel+eslint+webpack,在webpack-dev环境下使用sourcemap的打包
在没有优化之前
整体打包数据如下:
- 第一次打包时间43698ms
- rebuild小包12.12.js的时间为15949ms
-
具体打包图片可以如下所示:
主要的问题:
- 第三方依赖全部存在app.js文件中,
- 在rebuild的过程中, app.js和12.12.js都重新打包,但是我们只是改动了12.12.js的代码,
优化第一步
- 将第三方插件单独打包出来,将webpack的清单(manifest,存在于app.js中,随着每次打包的hash值会发生变化,导致app.js重复打包)单独打包出来
整体打包数据如下:
- 第一次打包时间54517ms
- rebuild小包12.12.js的时间为14212ms
-
具体打包图片可以如下所示
存在的问题:
在rebuild的过程中,12.12.js还是包含了第三方的依赖库。
优化第二步
- 将12.12.js中的node_modules模块单独取出来(如下45.45.js模块)
整体打包数据如下:
- 第一次打包时间49162ms
- rebuild小包12.12.js的时间为4483ms
-
具体打包图片可以如下所示
如何进一步进行优化呢?
对于目前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左右。