怎么提高Webpack构建速度

1.使用适当的mode选项

• 开发模式（development）：默认情况下，Webpack以较慢的速度进行构建，以便于开发。如果你不关心生产环境的优化，可以使用这个模式。
• 生产模式（production）：这个模式会启用所有可能的优化，包括代码压缩和体积缩小，但构建速度会更快。

module.exports = {
  mode: 'production',
};

2.优化loader配置

如将loader应用于最少数量的必要模块。而非如下:

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

通过使用 include 字段，仅将 loader应用在实际需要将其转换的模块:

const path = require("path");
module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, "src"),
        loader: "babel-loader",
      },
    ],
  },
};

3.避免不必要的plugin

每个插件都会带来一定的性能开销，因此尽量避免使用不必要的插件。

4.配置模块解析

Webpack 在模块解析时会搜索node_modules目录，这个过程比较耗时。为了减少搜索时间，我们可以使用resolve.alias配置选项来告诉Webpack直接使用特定的路径来查找模块。

• 合理使用resolve.extensions
• 优化 resolve.modules
• 优化resolve.alias

5.通过externals配置来提取常用库

module.exports = {
//告诉webpack哪些模块不需要被打包进bundle中,以某种方式（如CDN）在全局环境中可用。
  externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex': 'Vuex',
    'axios': 'axios',
    "CKEDITOR": "window.CKEDITOR"
  },
}

6.使用tree-shaking剔除多余代码

//使用 ES2015 模块语法：确保你的代码使用 import 和 export 语法，而不是 CommonJS 的 require 和 module.exports。
//在 package.json 中设置 "sideEffects": false：这告诉 Webpack 忽略那些没有副作用的文件（如 CSS 文件）。如果你的项目中有副作用（比如某些文件仅用于设置全局变量），则需要显式列出这些文件。
//在 Webpack 配置中启用优化：确保你开启了 optimization.usedExports 和 optimization.minimize。
 
// package.json  
{  
  "name": "your-project",  
  "sideEffects": false,  
  // ... 其他字段  
}
 
// webpack.config.js  
module.exports = {  
  // ... 其他配置  
  optimization: {  
    minimize: true,  
    usedExports: true, // 开启 Tree Shaking  
    sideEffects: true, // 允许 Webpack 根据 package.json 的 sideEffects 字段来剔除未使用的模块  
  },  
  module: {  
    rules: [  
      // ... 其他 loader 配置  
    ],  
  },  
};

7.小即是快(smaller=faster)

减少编译结果的整体大小，以提高构建性能。尽量保持 chunk 体积小。

• 使用数量更少/体积更小的 library。
• 在多页面应用程序中使用 SplitChunksPlugin 。
• 在多页面应用程序中使用 SplitChunksPlugin ，并开启 async 模式。
• 移除未引用代码。
• 只编译你当前正在开发的那些代码。
• 优化资源文件（如图片、字体）

8.使用缓存

可以使用Webpack的缓存功能，将打包结果缓存起来以避免重复构建。可以使用cache-loader或hard-source-webpack-plugin等插件来实现缓存。

9.DLL

DllPlugin 是Webpack 的一个插件，它可以将一些不经常变动的第三方库预先打包好，然后在开发过程中直接使用。这样可以减少每次构建时对这些库的重复打包，提高构建速度。

详细示例见这儿。

10.worker池

thread-loader 可以将非常消耗资源的 loader 分流给一个 worker pool。详细内容见这儿。

不要使用太多的 worker，因为 Node.js 的 runtime 和 loader 都有启动开销。最小化 worker 和 main process(主进程) 之间的模块传输。进程间通讯(IPC,inter process communication)是非常消耗资源的。

11.合理配置devtool

需要注意的是不同的 devtool 设置，会导致性能差异。

• eval具有最好的性能，但并不能帮助你转译代码。
• 如果你能接受稍差一些的map质量，可以使用cheap-source-map变体配置来提高性能
• 使用eval-source-map变体配置进行增量编译。