webpack性能优化

[sl1673495]

thread-loader

把这个 loader 放置在其他 loader 之前， 放置在这个 loader 之后的 loader 就会在一个单独的 worker 池里运行，一个 worker 就是一个 nodeJS 进程。由于进程的启动和进程间通讯也需要消耗时间，因此对比较耗时的 loader 开启这个优化。

不要随意开，亲测太多 loader 前加这个反而会拖慢打包速度。

hard-source-webpack-plugin

hard-source-webpack-plugin 会在第一次打包的时候记录缓存，并且在后续打包中显著提高速度。

https://github.com/webpack-contrib/cache-loader/issues/11#issuecomment-328480598

建议不要和 cache-loader 一起使用，初始化的时候会产生创建缓存等开销，如果两个一起使用，相当于对很多同样的内容做了两次缓存。

不加 hard-source 第一次：1m37s 不加 hard-source 第二次：1m07s 不加 hard-source 改动三个文件：1m18s

加 hard-source 第一次：56s 加 hard-source 第二次：35s 加 hard-source 改动三个文件: 55s

terser 启动多线程

使用多进程并行运行来提高构建速度。并发运行的默认数量为 os.cpus().length - 1 。

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true
      })
    ]
  }
};

优化 loader 配置

使用 Loader 时可以通过 test 、 include 、 exclude 三个配置项来命中 Loader 要应用规则的文件

优化 resolve.alias 配置

resolve.alias 配置项通过别名来把原导入路径映射成一个新的导入路径，减少耗时的递归解析操作。

优化 resolve.noParse 配置

不会引入其他依赖的库，不去解析内部依赖。

noParse: /jquery/