[webpack] optimize 配置有哪些作用

[hankliu62]

Webpack 的 optimize 选项是在指定 Webpack 配置对象时，用于配置优化选项的一个属性。该属性下包含了一系列用于调整构建输出质量和性能的设置。这里是一些 optimize 属性中可能包含的选项：

• splitChunks：这用于代码分割，可以将公共的依赖模块提取到已有的入口 chunk 中，或者产生一个新的 chunk。这可以被用来得到更小的 bundle 体积，优化加载时间，或者更好的缓存利用。

• runtimeChunk：该选项将 Webpack 的运行时代码分割成一个单独的 chunk。使用这个设置有利于长期缓存，并且当你使用多个入口点时推荐使用。

• minimize：当设置为 true 时，Webpack 会启动代码压缩。通常，这会使用 UglifyJSPlugin 来进行 JavaScript 代码的压缩，但现在通常默认使用更现代的工具如 TerserPlugin。

• minimizer：当你想要覆盖默认的压缩工具或者提供额外的压缩工具时使用。

• noEmitOnErrors（早期版本称为 NoEmitOnErrorsPlugin）：启用该选项后，Webpack 编译错误将会导致不生成输出。这确保了不会发出包含错误的 assets。

• concatenateModules（早期版本称为 ModuleConcatenationPlugin）：这个选项会试图找到模块图中可以安全地连接到单一模块的所有模块，来优化结果的体积。

• usedExports（也称为 tree shaking）：该选项用于标记 "tree shaking" 中未被使用的导出，使它们能被压缩工具删除。

在 Webpack 4 及以上版本中，这些优化默认在 mode 被设置为 production 时生效。通过合理地配置这些选项，开发者可以显著提高应用程序的加载和运行性能。这些优化通常包括减少 bundle 的体积和提高代码的运行时效率。在开发模式下，很多优化默认是关闭的，以提供更快的构建速度和更好的调试体验。