今天运行打包代码的时候,瞄了一下我们的打包速度,一看28.38 s
感觉有点长了,于是想优化一下。
1、首先使用speed-measure-webpack-plugin 这个神奇,包裹一下我们的 webpack 配置,具体在 create-react-app是build.js
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();
// 主要是这里,要找对地方,在 webpack 包裹的配置外面,加上我们的 plugin
const compiler = webpack(smp.wrap(config));
结果如下
总的来说就是 2 块,一个是 loader 解析文件的时候慢,还是一个就是压缩的时候慢。
遇到这种问题,1 是多进程,2 是缓存。
webpack4,现在的版本默认开启多进行,所以毫无疑问缓存神器祭出来。
把 HtmlWebpackPlugin、TerserPlugin、eslint-loader、babel-loader统统加上缓存。
因为我们用的是 css-in-js.所以不需要 css 解析和缓存。
图片我们也是自己压缩的,不知道工具压缩质量如何,没有冒险。
结果是快了十多秒。结果如下
基本上所有的工作项目耗时标记红色的都消失了。
bingo,半小时完成构建少 10 多秒的结果,我已经很满意啦。
后面再优化的话,还是有一些优化点的。比如:
1、webpack-dll-plugin进行预编译,把公共包,比如 react,lodash 等几乎不会修改的包,打包到一起,后面每次都不用编译了
2、使用 facebook 的 Prepack-webpack-plugin,可以把在编译期间可以合并的计算,直接计算给出结果,减少文件体积等。