webpack 优化从入门到精通，打造极速构建体验

2023-09-23 12:16:44

好的，以下是关于webpack 4 源码主流程分析（十四）：webpack 优化。

webpack 优化

webpack 是一个模块化构建工具，可以将各种类型的文件（如 JavaScript、CSS、HTML 等）打包成一个或多个捆绑文件，以便在浏览器中运行。在 webpack 的默认配置下，所有的模块都会被打包到一个大的捆绑文件中，这可能会导致页面加载缓慢，特别是对于大型项目。

为了优化 webpack 的构建速度，我们可以使用各种优化策略，包括：

代码分割 ：将大的捆绑文件分割成多个较小的捆绑文件，这样可以减少页面加载时间。
缓存：利用 webpack 的缓存机制，可以减少重复编译的时间。
压缩：对代码进行压缩，可以减少代码的大小，从而提高页面加载速度。
Scope Hoisting ：将公共代码提升到更高的作用域，可以减少代码的重复。

代码分割

代码分割是 webpack 最常用的优化策略之一。它可以将大的捆绑文件分割成多个较小的捆绑文件，这样可以减少页面加载时间。

webpack 提供了多种代码分割策略，包括：

按需加载 ：按需加载是指只在需要时才加载模块。这可以通过使用 webpack 的 import() 函数来实现。
动态导入 ：动态导入是指在运行时加载模块。这可以通过使用 webpack 的 require.ensure() 函数来实现。
公共代码提取 ：公共代码提取是指将多个模块中共享的代码提取到一个单独的捆绑文件中。这可以通过使用 webpack 的 optimization.splitChunks 选项来实现。

缓存

webpack 利用缓存机制可以减少重复编译的时间。当 webpack 编译一个模块时，它会将该模块的编译结果缓存在内存中。如果该模块在后续的编译中没有发生变化，则 webpack 会直接从缓存中加载该模块的编译结果，而无需重新编译。

webpack 提供了多种缓存策略，包括：

内存缓存 ：内存缓存是 webpack 的默认缓存策略。它将编译结果缓存在内存中。
文件系统缓存 ：文件系统缓存将编译结果缓存在文件系统中。这可以减少内存的使用，但可能会降低编译速度。
远程缓存 ：远程缓存将编译结果缓存在远程服务器上。这可以减少本地机器的存储空间使用，但可能会降低编译速度。

压缩

压缩是 webpack 最常用的优化策略之一。它可以对代码进行压缩，可以减少代码的大小，从而提高页面加载速度。

webpack 提供了多种压缩策略，包括：

Terser ：Terser 是 webpack 默认的压缩工具。它可以对 JavaScript 代码进行压缩。
UglifyJS ：UglifyJS 是 webpack 的另一个压缩工具。它可以对 JavaScript 代码进行压缩。
Brotli ：Brotli 是一种新的压缩算法，可以比 Gzip 提供更好的压缩率。

Scope Hoisting

Scope Hoisting 是 webpack 的一项优化策略，可以将公共代码提升到更高的作用域，可以减少代码的重复。

webpack 提供了两种 Scope Hoisting 策略：

自动提升 ：自动提升是指 webpack 会自动将公共代码提升到更高的作用域。
手动提升 ：手动提升是指开发人员可以手动将公共代码提升到更高的作用域。

webpack 优化最佳实践

在使用 webpack 时，我们可以遵循以下最佳实践来优化构建速度：

使用代码分割 ：将大的捆绑文件分割成多个较小的捆绑文件。
利用缓存 ：利用 webpack 的缓存机制，可以减少重复编译的时间。
压缩代码 ：对代码进行压缩，可以减少代码的大小，从而提高页面加载速度。
使用 Scope Hoisting ：将公共代码提升到更高的作用域，可以减少代码的重复。
使用性能分析工具 ：使用性能分析工具可以帮助我们发现构建过程中的性能瓶颈。

webpack 优化示例

下面是一个 webpack 配置文件的示例，展示了如何使用代码分割、缓存、压缩和 Scope Hoisting 来优化构建速度：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxSize: 50000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          chunks: 'initial',
        },
        common: {
          minChunks: 2,
          priority: -20,
          chunks: 'initial',
        },
      },
    },
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,
          },
        },
      }),
    ],
    runtimeChunk: 'single',
  },
  plugins: [
    new webpack.HashedModuleIdsPlugin(),
    new webpack.DllPlugin({
      path: path.join(__dirname, 'manifest.json'),
      name: '[name]_[hash]',
    }),
    new webpack.DllReferencePlugin({
      context: path.join(__dirname, 'src'),
      manifest: path.join(__dirname, 'manifest.json'),
    }),
  ],
};