webpack + create-react-app 打包优化

今天运行打包代码的时候，瞄了一下我们的打包速度，一看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，可以把在编译期间可以合并的计算，直接计算给出结果，减少文件体积等。