Webpack optimization

Webpack 的 optimization 配置项是其核心功能之一，它允许开发者对构建过程进行精细控制，从而实现各种优化，例如减小打包体积、提高加载速度、改善缓存策略等。Webpack 5 在 optimization 方面做了很多改进，默认情况下就开启了许多生产环境的优化。

下面将详细列举 optimization 下的所有可配置点及其作用，并提供代码示例进行讲解。

Webpack `optimization` 简介

optimization 配置项用于配置 Webpack 在构建过程中执行的各种优化策略。这些优化通常旨在：

减小输出文件体积： 通过代码压缩、摇树优化 (Tree Shaking)、模块合并等。
提高应用加载速度： 通过代码分割 (Code Splitting)、运行时代码分离等。
改善缓存策略： 通过稳定的模块/chunk ID、内容哈希等。
提升构建性能： 通过模块连接 (Module Concatenation) 等。

在 production 模式下，Webpack 默认会开启许多 optimization 配置。但在 development 模式下，这些优化通常是关闭的，以加快构建速度和方便调试。

js 复制代码

// webpack.config.js
module.exports = {
    mode: 'production', // 或 'development'
    // ... 其他配置
    optimization: {
        // 在这里配置各种优化选项
    },
};

`optimization` 可配置项详解

1. `optimization.minimize`

作用 (Purpose): 告知 Webpack 是否要使用 minimizer 对输出的 bundle 进行压缩。

代码示例 (Code Example):

js 复制代码

// webpack.config.js
module.exports = {
    mode: 'production',
    optimization: {
        minimize: true, // 默认在 production 模式下为 true
    },
};

详细讲解 (Explanation):
- 当设置为 true 时，Webpack 会使用 optimization.minimizer 配置的插件来压缩 JavaScript、CSS 等代码。
- 在 production 模式下，此项默认为 true。在 development 模式下，默认为 false。
- 如果你想在 development 模式下也进行压缩（通常不建议，因为会减慢构建速度），可以手动设置为 true。

2. `optimization.minimizer`

作用 (Purpose): 配置用于压缩 JavaScript、CSS 等文件的插件。

代码示例 (Code Example):

js 复制代码

// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
    mode: 'production',
    optimization: {
        minimize: true,
        minimizer: [
            // 压缩 JavaScript
            new TerserPlugin({
                // 可以配置并行压缩、缓存等
                parallel: true, // 开启多进程并行压缩
                terserOptions: {
                    compress: {
                        drop_console: true, // 移除 console.log
                    },
                },
            }),
            // 压缩 CSS
            new CssMinimizerPlugin(),
        ],
    },
};

详细讲解 (Explanation):
- minimizer 接受一个插件实例数组。
- 默认情况下，Webpack 5 在 production 模式下会自动使用 TerserPlugin 来压缩 JavaScript。
- 如果你需要压缩 CSS，通常需要额外安装并配置 css-minimizer-webpack-plugin。
- 你可以通过配置这些插件的选项来定制压缩行为，例如移除 console.log、保留注释等。

3. `optimization.splitChunks`

作用 (Purpose): 代码分割。将公共的模块或第三方库从主 bundle 中分离出来，形成单独的 chunk，以实现更小的初始加载体积和更好的缓存利用。

代码示例 (Code Example):

js 复制代码

// webpack.config.js
module.exports = {
    mode: 'production',
    entry: {
        app: './src/index.js',
        // 也可以有多个入口点
        // another: './src/another.js',
    },
    output: {
        filename: '[name].[contenthash].js',
        chunkFilename: '[name].[contenthash].chunk.js', // 非入口 chunk 的命名
    },
    optimization: {
        splitChunks: {
            chunks: 'async', // 默认值，只对动态导入的模块进行分割
            minSize: 20000, // 生成 chunk 的最小体积（字节），小于此值不分割
            minRemainingSize: 0, // 确保拆分后剩余的 chunk 不会太小
            minChunks: 1, // 模块被引用多少次才进行分割
            maxAsyncRequests: 30, // 按需加载时并行请求的最大数量
            maxInitialRequests: 30, // 入口点并行请求的最大数量
            enforceSizeThreshold: 50000, // 强制执行的最小大小阈值，即使不满足 minSize 也会尝试分割
            cacheGroups: {
                // 定义缓存组，可以更细粒度地控制分割
                vendors: {
                    test: /[\/]node_modules[\/]/, // 匹配 node_modules 中的模块
                    name: 'vendors', // 分割出的 chunk 名称
                    chunks: 'all', // 对同步和异步模块都有效
                    priority: -10, // 优先级，数字越大优先级越高，负数表示默认优先级
                    reuseExistingChunk: true, // 如果该 chunk 已经存在，则直接使用
                },
                common: {
                    minChunks: 2, // 至少被引用两次的模块
                    priority: -20,
                    name: 'common',
                    chunks: 'all',
                    reuseExistingChunk: true,
                },
                // 也可以自定义其他缓存组，例如：
                // antd: {
                //     test: /[\/]node_modules[\/](antd)[\/]/,
                //     name: 'antd',
                //     chunks: 'all',
                //     priority: 0, // 优先级高于 vendors
                // },
            },
        },
    },
};

详细讲解 (Explanation):
- 这是最重要的优化项之一，用于实现代码分割，减少重复代码，提高缓存命中率。
- chunks:
  - async (默认): 只对动态导入（import()）的模块进行分割。
  - initial: 只对入口文件和同步引入的模块进行分割。
  - all: 对同步和异步模块都进行分割，这是最推荐的设置，因为它能最大化代码复用。
- minSize: 生成 chunk 的最小体积。如果分割后 chunk 小于此值，则不进行分割。
- minRemainingSize: Webpack 5 新增，确保拆分后剩余的 chunk 不会太小。
- minChunks: 模块被引用多少次才进行分割。例如，设置为 2 表示只有被至少两个 chunk 共享的模块才会被分割。
- maxAsyncRequests / maxInitialRequests: 限制并行请求的数量，避免过多的 chunk 导致请求开销过大。
- enforceSizeThreshold : 强制分割的阈值，即使不满足 minSize，如果模块大小超过此值也会尝试分割。
- cacheGroups: 最核心的部分，允许你定义不同的分割策略。
  - test: 正则表达式或函数，用于匹配模块路径。
  - name: 分割出的 chunk 的名称。
  - priority : 优先级，数字越大优先级越高。当一个模块同时满足多个 cacheGroup 的条件时，会分配给优先级最高的那个组。
  - reuseExistingChunk: 如果该 chunk 已经存在，则直接使用，而不是重新创建一个。

4. `optimization.runtimeChunk`

作用 (Purpose): 将 Webpack 的运行时代码（用于连接模块、加载 chunk 等）提取到一个单独的 chunk 中。

代码示例 (Code Example):

js 复制代码

// webpack.config.js
module.exports = {
    mode: 'production',
    optimization: {
        runtimeChunk: 'single', // 或 true
    },
};

详细讲解 (Explanation):
- 'single' : 为所有入口点创建一个共享的运行时 chunk。这是最常见的用法，推荐用于单页面应用。
- true: 为每个入口点创建一个独立的运行时 chunk。
- 好处: 当你的应用代码或第三方库代码发生变化时，只有对应的 chunk 的内容哈希会改变，而运行时 chunk 的哈希保持不变（除非 Webpack 运行时代码本身更新），从而更好地利用浏览器缓存。

5. `optimization.nodeEnv`

作用 (Purpose): 设置 process.env.NODE_ENV 的值。这通常用于在代码中进行环境判断，例如：if (process.env.NODE_ENV === 'production') { ... }。

代码示例 (Code Example):

js 复制代码

// webpack.config.js
module.exports = {
    // mode 已经设置了 NODE_ENV，但你也可以在此处显式覆盖
    optimization: {
        nodeEnv: 'development', // 即使 mode 是 'production'，这里也会强制设置为 'development'
    },
};

详细讲解 (Explanation):
- 在 production 模式下，nodeEnv 默认设置为 'production'。在 development 模式下，默认设置为 'development'。
- 这个设置会影响到代码中对 process.env.NODE_ENV 的引用，在构建时会被替换为实际的值，从而允许死代码消除 (Dead Code Elimination)。

6. `optimization.concatenateModules` (Scope Hoisting / 模块连接)

作用 (Purpose): 提升模块的执行效率和减小 bundle 体积。Webpack 会尝试将多个模块合并到一个函数作用域中，而不是每个模块都封装在一个单独的函数中。

代码示例 (Code Example):

js 复制代码

// webpack.config.js
module.exports = {
    mode: 'production',
    optimization: {
        concatenateModules: true, // 默认在 production 模式下为 true
    },
};

详细讲解 (Explanation):
- 在 Webpack 3 引入，也称为 "Scope Hoisting"。
- 优点:
  - 更小的 bundle 体积: 减少了模块封装函数带来的额外代码。
  - 更快的执行速度: 减少了函数调用开销和作用域查找。
- 此项在 production 模式下默认开启。

7. `optimization.usedExports` (Tree Shaking 的一部分)

作用 (Purpose): 标记模块中哪些导出被使用了。这是 Tree Shaking 的第一步。

代码示例 (Code Example):

js 复制代码

// webpack.config.js
module.exports = {
    mode: 'production',
    optimization: {
        usedExports: true, // 默认在 production 模式下为 true
    },
};

详细讲解 (Explanation):
- 当 usedExports 设置为 true 时，Webpack 会分析模块的依赖关系，并标记出每个模块中哪些导出被其他模块引用了。
- 未被标记的导出在后续的压缩阶段（如 TerserPlugin）会被移除。
- 要使 Tree Shaking 生效，除了 usedExports: true，还需要：
  - 使用 ES Module 语法 (import/export)。
  - 将 mode 设置为 production (默认开启 usedExports 和 minimize)。
  - 或者手动配置 minimize 和 minimizer。
  - 配合 optimization.sideEffects。

8. `optimization.sideEffects` (Tree Shaking 的另一部分)

作用 (Purpose): 进一步优化 Tree Shaking。它告诉 Webpack 哪些模块具有副作用（即，即使没有导出被使用，也应该保留它们）。

代码示例 (Code Example):

js 复制代码

// webpack.config.js
module.exports = {
    mode: 'production',
    optimization: {
        sideEffects: true, // 默认在 production 模式下为 true
    },
};

详细讲解 (Explanation):
- 当 sideEffects 设置为 true 时，Webpack 会根据 package.json 中的 sideEffects 字段或 module.rules 中的 sideEffects 属性来判断模块是否有副作用。
- 如果一个模块被标记为没有副作用，并且它的所有导出都没有被使用，那么整个模块都可能被完全移除。
- package.json 配置示例:
  js 复制代码
```
{
    "name": "my-package",
    "sideEffects": false // 表示整个包都没有副作用，可以安全地进行 Tree Shaking
    // 或者 "sideEffects": ["./src/util.js", "*.css"] // 只有这些文件有副作用
}
```
- module.rules 配置示例:
  js 复制代码
```
module.exports = {
    module: {
        rules: [
            {
                test: /.css$/,
                use: ['style-loader', 'css-loader'],
                sideEffects: true, // 明确 CSS 文件有副作用（因为它们会影响全局样式）
            },
        ],
    },
};
```
- 正确配置 sideEffects 对于 Tree Shaking 至关重要，可以避免误删有副作用的代码（如全局样式、polyfill）。

9. `optimization.providedExports`

作用 (Purpose): 标记模块提供了哪些导出。这是 usedExports 的反向操作，用于优化模块之间的依赖分析。

代码示例 (Code Example):

js 复制代码

// webpack.config.js
module.exports = {
    mode: 'production',
    optimization: {
        providedExports: true, // 默认在 production 模式下为 true
    },
};

详细讲解 (Explanation):
- Webpack 会分析每个模块，确定它导出了哪些名称。这有助于在构建图时更高效地识别和跟踪模块的导出。
- 它与 usedExports 协同工作，共同实现 Tree Shaking。

10. `optimization.innerGraph`

作用 (Purpose): 启用更深层次的模块内部依赖分析，以实现更激进的 Tree Shaking。

代码示例 (Code Example):

js 复制代码

// webpack.config.js
module.exports = {
    mode: 'production',
    optimization: {
        innerGraph: true, // 默认在 production 模式下为 true
    },
};

详细讲解 (Explanation):
- Webpack 5 引入的特性。它允许 Webpack 分析模块内部的函数调用和变量引用，从而更精确地判断哪些代码是真正"死"的。
- 例如，如果一个函数只在模块内部被调用，并且这个函数没有被导出，那么即使它被定义了，也可以被 innerGraph 识别为死代码并移除。
- 这使得 Webpack 的 Tree Shaking 能力更强大。

11. `optimization.removeAvailableModules`

作用 (Purpose): 移除那些已经被父 chunk 包含的模块。

代码示例 (Code Example):

js 复制代码

// webpack.config.js
module.exports = {
    mode: 'production',
    optimization: {
        removeAvailableModules: true, // 默认在 production 模式下为 true
    },
};

详细讲解 (Explanation):
- 当一个 chunk 依赖于另一个 chunk，并且被依赖的 chunk 包含了某个模块时，这个模块就不需要在依赖它的 chunk 中再次打包。
- 这个优化可以避免重复打包，减小 bundle 体积。

12. `optimization.removeEmptyChunks`

作用 (Purpose): 移除空的 chunk。

代码示例 (Code Example):

js 复制代码

// webpack.config.js
module.exports = {
    mode: 'production',
    optimization: {
        removeEmptyChunks: true, // 默认在 production 模式下为 true
    },
};

详细讲解 (Explanation):
- 在代码分割或其他优化过程中，可能会产生一些不包含任何实际代码的空 chunk。此选项会将其移除，保持输出简洁。

13. `optimization.mergeDuplicateChunks`

作用 (Purpose): 合并重复的 chunk。

代码示例 (Code Example):

js 复制代码

// webpack.config.js
module.exports = {
    mode: 'production',
    optimization: {
        mergeDuplicateChunks: true, // 默认在 production 模式下为 true
    },
};

详细讲解 (Explanation):
- 当多个 chunk 最终包含完全相同的模块集合时，此选项会将它们合并为一个 chunk，以减少冗余。

14. `optimization.flagIncludedChunks`

作用 (Purpose): 标记那些已经被其他 chunk 包含的 chunk。

代码示例 (Code Example):

js 复制代码

// webpack.config.js
module.exports = {
    mode: 'production',
    optimization: {
        flagIncludedChunks: true, // 默认在 production 模式下为 true
    },
};

详细讲解 (Explanation):
- 这有助于 Webpack 更好地理解 chunk 之间的包含关系，从而在后续的优化步骤中（如 removeAvailableModules）做出更明智的决策。

15. `optimization.mangleExports`

作用 (Purpose): 混淆（mangle）导出的名称，以减小 bundle 体积。

代码示例 (Code Example):

js 复制代码

// webpack.config.js
module.exports = {
    mode: 'production',
    optimization: {
        mangleExports: 'deterministic', // 或 true, false
    },
};

详细讲解 (Explanation):
- 当设置为 true 或 'deterministic' 时，Webpack 会将模块的导出名称缩短为更短的字符（例如，export const longName = ... 可能会变成 export const a = ...）。
- 'deterministic' 会生成确定性的短名称，这对于长期缓存和调试很有用。
- 这与 TerserPlugin 内部的变量混淆类似，但作用于模块的导出名称。

16. `optimization.realContentHash`

作用 (Purpose): 确保 chunk 的内容哈希只在实际内容发生变化时才改变，而不是因为模块 ID 或 chunk ID 的变化而改变。

代码示例 (Code Example):

js 复制代码

// webpack.config.js
module.exports = {
    mode: 'production',
    output: {
        filename: '[name].[contenthash].js',
    },
    optimization: {
        realContentHash: true, // 默认在 production 模式下为 true
    },
};

详细讲解 (Explanation):
- 在 production 模式下，Webpack 默认会使用 [contenthash] 来命名输出文件，以便实现长期缓存。
- realContentHash 确保这个哈希值是基于 chunk 的真实内容计算的，而不是基于内部的、可能不稳定的 ID。这对于实现稳定的缓存非常重要。

17. `optimization.chunkIds`

作用 (Purpose): 配置生成 chunk ID 的策略。

代码示例 (Code Example):

js 复制代码

// webpack.config.js
module.exports = {
    mode: 'production',
    optimization: {
        chunkIds: 'deterministic', // 默认在 production 模式下为 'deterministic'
        // 其他选项：'named', 'size', 'total-size', 'natural', 'size', 'total-size', 'named', 'deterministic', 'unsafe'
    },
};

详细讲解 (Explanation):
- 'deterministic' (推荐) : 根据模块内容生成短而确定性的 ID，即使模块顺序改变，ID 也不会变，利于长期缓存。
- 'named' : 使用可读的名称作为 ID（开发模式常用）。
- 'natural' : 递增的数字 ID（不推荐用于生产环境，因为模块顺序变化会导致 ID 变化）。
- 'size' : 根据 chunk 大小分配 ID，小 chunk 优先。
- 'total-size' : 根据 chunk 总大小分配 ID。

18. `optimization.moduleIds`

作用 (Purpose): 配置生成模块 ID 的策略。

代码示例 (Code Example):

js 复制代码

// webpack.config.js
module.exports = {
    mode: 'production',
    optimization: {
        moduleIds: 'deterministic', // 默认在 production 模式下为 'deterministic'
        // 其他选项：'named', 'hashed', 'size', 'total-size', 'natural', 'size', 'total-size', 'named', 'deterministic', 'unsafe'
    },
};

详细讲解 (Explanation):
- 与 chunkIds 类似，但作用于单个模块。
- 'deterministic' (推荐) : 根据模块内容生成短而确定性的 ID，即使模块顺序改变，ID 也不会变，利于长期缓存。
- 'named' : 使用模块路径作为 ID（开发模式常用）。
- 'natural' : 递增的数字 ID（不推荐用于生产环境）。

19. `optimization.portableRecords`

作用 (Purpose): 使 Webpack 的记录文件（records.json）在不同机器或不同路径下也能保持一致。

代码示例 (Code Example):

js 复制代码

// webpack.config.js
module.exports = {
    // ...
    recordsPath: path.resolve(__dirname, 'records.json'), // 需要配置 recordsPath
    optimization: {
        portableRecords: true, // 默认 false
    },
};

详细讲解 (Explanation):
- 记录文件用于存储模块和 chunk 的 ID 映射，以便在增量构建时保持 ID 稳定。
- portableRecords 确保记录文件中的路径是相对的或抽象的，而不是绝对路径，这对于 CI/CD 环境或团队协作非常有用，可以避免因路径不同导致 ID 变化而使缓存失效。

20. `optimization.emitOnErrors` / `optimization.noEmitOnErrors`

作用 (Purpose): 控制在编译过程中遇到错误时是否输出资源。

代码示例 (Code Example):

js 复制代码

// webpack.config.js
module.exports = {
    mode: 'production',
    optimization: {
        // Webpack 5 默认是 false，即遇到错误不输出
        // emitOnErrors: true, // 强制即使有错误也输出
        noEmitOnErrors: true, // 默认 true，遇到错误不输出
    },
};

详细讲解 (Explanation):
- emitOnErrors: true (Webpack 4 默认): 即使编译过程中有错误，Webpack 也会尝试输出资源。这可能导致输出不完整或损坏的文件。
- noEmitOnErrors: true (Webpack 5 默认): 如果编译过程中有任何错误，Webpack 将不会输出任何资源。这确保了只输出完全没有错误的文件，避免部署损坏的代码。

21. `optimization.mangleWasmImports`

作用 (Purpose): 混淆 WebAssembly 模块的导入名称，以减小体积。

代码示例 (Code Example):

js 复制代码

// webpack.config.js
module.exports = {
    mode: 'production',
    optimization: {
        mangleWasmImports: true, // 默认在 production 模式下为 true
    },
};

详细讲解 (Explanation):
- 类似于 JavaScript 的变量混淆，此选项专门针对 WebAssembly 模块的导入函数名称进行缩短，从而减小 Wasm 文件的大小。

总结与最佳实践

Webpack 的 optimization 配置项提供了极其强大的能力来优化前端应用的构建产物。在 production 模式下，Webpack 5 默认开启了许多重要的优化，这使得开箱即用的体验非常好。

推荐的 optimization 配置策略：

使用 mode: 'production' : 默认开启大部分推荐的优化。
splitChunks : 仔细配置 cacheGroups，特别是 vendors 和 common，并考虑 chunks: 'all'。根据项目实际情况调整 minSize、maxAsyncRequests 等。
runtimeChunk: 'single' : 提升缓存利用率。
minimizer : 如果需要压缩 CSS，记得添加 CssMinimizerPlugin。根据需要配置 TerserPlugin 的 terserOptions。
Tree Shaking : 确保使用 ES Module 语法，并检查 package.json 的 sideEffects 字段是否正确配置。
chunkIds 和 moduleIds : 保持默认的 'deterministic'，以实现稳定的长期缓存。

通过合理配置这些选项，你可以显著提升 Webpack 构建的输出质量和运行时性能。

Webpack optimization