构建速度优化相关的配置。影响因素有两个，一个是loader和plugin方面的构建过程，一个就是压缩。

Tips：

  1. 使用最新版本的 Webpack 4 要比之前的 Webpack 3 和 2 版本快很多，所以单纯升级 Webpack 版本到最 新版本就可以提升一大截构建速度；
    1. 区分开发和生产环境两套配置，各司其职，例如在开发阶段，代码压缩、目录清理、计算 hash、提取 CSS这些都没有必要做

减少查找过程

聚焦Webpack 要处理的代码目录，帮助缩小Webpack的查找过程。

使用 resolve.alias 减少查找过程

resolve.alias 配置项通过别名（alias）来把原导入路径映射成一个新的导入路径。比如我们经常使用的 react 库，其实 react 库中有两套代码，一套是基于 CommonJs 的模块化代码，一套是打包好的完整代码，react.js 用于 开发环境，react.min.js 用生产环境。所以通过 resolve.alias 配置，可以让 Webpack 处理时，直接使用打包好的 react，从而跳过耗时的模块解析，还有我们项目中可能会有一些相对路径的写法，可以使用 alias 配置来减少查找过程，具体示例配置如下：

  1. module.exports = {
  2.   resolve: {
  3.     // 使用 alias 把导入 react 的语句换成直接使用单独完整的 react.min.js 文件，
  4.     // 减少耗时的递归解析操作
  5.     alias: {
  6.       react: path.resolve(__dirname, "./node_modules/react/dist/react.min.js"),
  7.       "@lib": path.resolve(__dirname, "./src/lib/"),
  8.     },
  9.   },
  10. };

使用 resolve.extensions 优先查找

在导入语句没带文件后缀时，Webpack 会自动带上后缀后去尝试询问文件是否存在，查询的顺序是按照我们配置的resolve.extensions顺序从前到后查找，如果我们配置resolve.extensions= ['js', 'json']，那么会先找xx x.js然后没有再查找xxx.json，所以我们应该把常用到的文件后缀写在前面，或者我们导入模块时，尽量带上文 导入模块时，尽量带上文件后缀名。

排除不需要解析的模块

module.noParse 配置项可以让 Webpack 忽略对部分没采用模块化的文件递归解析处理，例如：jQuery、 ChartJS，它们体积庞大又没有采用模块化标准，让 Webpack 去解析这些文件耗时又没有意义，所以使用module. noParse排除它们。

  1. module.exports = {
  2.   module:{
  3.       noParse:/node_modules\/(jquery\.js)/
  4.   }
  5. };

合理配置 rule 的查找范围

在rule配置上，有 test include exclude 三个可以控制范围的配置。

  • 只在 test 和 文件匹配中使用正则表达式
  • 在 include 和 exclude 中使用绝对路径数组
  • 尽量避免 exclude ，更倾向于使用 include 
  1. rules: [
  2.     {
  3.       //test 正则
  4.       test: /\.js$/,
  5.       loader: "babel-loader",
  6.       //排除路径使用数组
  7.       exclude: [path.resolve(__dirname, "./node_modules")],
  8.       include: [path.resolve(__dirname, "./src")],
  9.     },
  10.   ],

Tips : exclude 优先级要优于 include 和 test ,所以当三者配置有冲突时，exclude 会优先于其他两个配置

利用多线程提升构建速度

多线程打包方案有两种：thread-loader 和 HappyPack

使用 webpack.DllPlugin 来预先编译

缓存（Cache）相关

babel-loader 配置

Webpack中打包的核心是 Javascript 文件的打包，Javascript 使用的是 babel-loader ，打包时间与此有关。

babel-loader 提供了 cacheDirectory配置给 Babel 编译时给定的目录，并且将用于缓存加载器的结果，但是这个 设置默认是false关闭的状态，我们需要设置为true，这样 babel-loader 将使用默认的缓存目录 。

node_modules/.cache/babel-loader，如果在任何根目录下都没有找到 node_modules 目录，将会降级回退到操作系统默认的临时文件目录

  1. rules: [
  2.     {
  3.       test: /\.js$/,
  4.       loader: "babel-loader",
  5.       options: {
  6.         cacheDirectory: true,
  7.       },
  8.       //排除路径
  9.       exclude: /node_modules/,
  10.       //查找路径
  11.       include: [path.resolve("./src")],
  12.     },
  13.   ],

其他构建过程中的优化点
1. sourceMap 生成耗时严重，根据之前 sourceMapTODO表格选择合适的devtool值；
2. 切换一些 loader 或者插件，比如：fast-sass-loader可以并行处理 sass 文件，要比 sass-loader 快 5~10 倍

压缩速度优化
相对于构建过程而言，压缩相对我们来说只有生产环境打包才会做，而且压缩我们除了添加 cache 和多线程支持之 外，可以优化的空间较小。我们在使用terser-webpack-plugin的时候可以通过下面的配置开启多线程和缓存

  1. const TerserPlugin = require("terser-webpack-plugin");
  2. module.exports = {
  3.   optimization: {
  4.     minimizer: [
  5.       new TerserPlugin({
  6.         cache: true, // 开启缓存
  7.         parallel: true, // 多线程
  8.       }),
  9.     ],
  10.   },
  11. };