Webpack 的 optimization 配置有哪些常用选项？

推荐答案

Webpack 的 optimization 配置中常用的选项包括：

1. splitChunks：用于代码分割，将公共代码提取到单独的 chunk 中，避免重复打包。
2. minimize：是否启用代码压缩，默认在生产环境下为 true。
3. minimizer：自定义压缩工具，如 TerserPlugin 用于 JavaScript 压缩，CssMinimizerPlugin 用于 CSS 压缩。
4. runtimeChunk：将运行时代码提取到单独的 chunk 中，通常设置为 single 或 true。
5. moduleIds：控制模块 ID 的生成方式，可选值包括 natural、named、deterministic 等。
6. chunkIds：控制 chunk ID 的生成方式，可选值包括 natural、named、deterministic 等。
7. usedExports：启用 Tree Shaking，标记未使用的导出代码。
8. sideEffects：启用副作用优化，标记模块是否有副作用。
9. concatenateModules：启用模块合并，将多个模块合并为一个模块，减少代码体积。

本题详细解读

splitChunks

splitChunks 是 Webpack 中用于代码分割的核心配置。通过将公共代码提取到单独的 chunk 中，可以有效减少重复打包的代码量。常见的配置项包括：

• chunks：指定哪些 chunk 会被优化，可选值包括 initial、async、all。
• minSize：指定 chunk 的最小大小，小于该值的 chunk 不会被分割。
• maxSize：指定 chunk 的最大大小，超过该值的 chunk 会被进一步分割。
• minChunks：指定 chunk 被引用的最小次数，小于该次数的 chunk 不会被分割。

minimize

minimize 用于控制是否启用代码压缩。在生产环境下，默认值为 true，表示启用压缩。可以通过设置为 false 来禁用压缩。

minimizer

minimizer 允许开发者自定义压缩工具。常见的压缩工具包括：

• TerserPlugin：用于压缩 JavaScript 代码。
• CssMinimizerPlugin：用于压缩 CSS 代码。

runtimeChunk

runtimeChunk 用于将 Webpack 的运行时代码提取到单独的 chunk 中。常见的配置值为 single 或 true，表示将所有运行时代码提取到一个单独的 chunk 中。

moduleIds 和 chunkIds

moduleIds 和 chunkIds 分别用于控制模块 ID 和 chunk ID 的生成方式。常见的配置值包括：

• natural：按自然顺序生成 ID。
• named：使用模块或 chunk 的名称作为 ID。
• deterministic：生成确定的 ID，适用于长期缓存。

usedExports 和 sideEffects

usedExports 和 sideEffects 是 Tree Shaking 相关的配置。usedExports 用于标记未使用的导出代码，而 sideEffects 用于标记模块是否有副作用。通过启用这两个选项，可以进一步优化代码体积。

concatenateModules

concatenateModules 用于启用模块合并功能。通过将多个模块合并为一个模块，可以减少代码体积，提升运行效率。