关于前端:Webpack项目优化实战打包速度优化一文搞定

目录：1、速度剖析
2、cdn 分包
3、多过程构建
4、放大构建范畴
5、应用缓存

1、打包速度剖析
在进行打包速度优化之前，须要对以后我的项目每个局部的打包工夫理解分明。

咱们借助 speed-measure-webpack-plugin 插件，它剖析 webpack 的总打包耗时以及每个 plugin 和 loader 的打包耗时，从而让咱们对打包工夫较长的局部进行针对性优化。

通过以下命令装置插件：

yarn add speed-measure-webpack-plugin -D

再次 build 就能看到各个局部的打包耗时

2、CDN 分包
之前对打包体积进行剖析的时候，发现 react-dom、react 是占据体积十分大的几个包，在打包这些包的时候就十分耗时。cdn 分包能够让咱们在打包过程中将特定包分离出来，从而晋升打包速度。

排除局部库的打包须要借助 html-webpack-externals-plugin 插件，执行如下命令装置：

yarn add html-webpack-externals-plugin -D

然而如果 Webpack 的版本过高，装置可能呈现版本抵触：

能够先用 –force 命令强制装置，等呈现抵触问题再卸载解决。

能够发现应用 cdn 分包，构建速度快了 2s 左右

3、多过程构建
对于耗时较长的模块，同时开启多个 nodejs 过程进行构建，能够无效地晋升打包的速度。能够采取的一些形式有：

thread-loader
HappyPack（作者曾经不保护）
parallel-webpack

本文采纳 thread-loader 进行多过程构建。

yarn add thread-loader -D

更改 webpack.config.js 对应 loader 的 rules 局部，须要留神的是，该条 rule 须要放在其余 rule 的上方。

module: {
      strictExportPresence: true,
      rules: [
        // 多过程构建
        {
          test: /.js$/,
          include: path.resolve('src'),
          use: [
            "thread-loader",
            // 耗时的 loader（例如 babel-loader）],
        },

理论打包工夫又优化了 2s。

4、放大构建范畴
构建过程是默认全局查找，这十分的耗时。通过手动配置 rules 中的文件查找范畴，能够缩小打包的范畴，从而晋升打包的速度。
在 webpack.config.js 文件中如下配置：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
        exclude: /node_modules/,
      },
    ],
  },
};

因为 babel-loader 对文件的转化是十分耗时的，所以放大构建范畴首先就是放大须要 babel-loader 解决的文件范畴。

能够通过 test、include、exclude 三个配置项来命中 Loader 要利用规定的文件，用 include 去命中须要被 babel-loader 解决的文件，exclude 去排除不须要被解决的文件，从而放大了 Loader 解决文件的范畴。

5、应用缓存

通过应用缓存机制能无效晋升二次打包速度。目前 webpack5 内置了 cache 模块，缓存生成的 webpack 模块和 chunk，来改善构建速度。它在开发环境下会默认设置为 type: ‘memory’ 而在生产环境中被禁用。能够通过设置 cache: {type: ‘filesystem’} 来凋谢更多配置项。

比方我在 webpack.config.js 中如下配置：

module.exports = {
  cache: {type: 'filesystem',},
};

那么第一次打包后，就会在 node_modules 文件夹上面生成一个 cache 文件夹，从而第二次打包速度显著晋升。