面试题：Webpack 中如何通过插件优化打包速度与文件体积

Question

请列举至少两个 Webpack 插件，并阐述它们是如何在打包过程中平衡打包速度与文件体积的，比如从压缩代码、剔除未使用代码等方面说明。

Answer 1

• UglifyJSPlugin：
  • 压缩代码：在打包过程中，它会通过移除多余的空格、注释，缩短变量名等方式对JavaScript代码进行压缩，显著减小文件体积。例如将const myLongVariableName = 'value'; 压缩为 const a='value';，从而在不影响代码功能的前提下减小体积。同时，这种压缩操作对打包速度影响较小，因为其优化算法经过精心设计，能在较快的速度下完成压缩任务，较好地平衡了打包速度与文件体积。
  • 剔除未使用代码：虽然UglifyJSPlugin本身在剔除未使用代码方面能力有限，但它可以与其他工具（如Tree - shaking相关工具）协同工作。当Tree - shaking完成对未使用代码的识别后，UglifyJSPlugin在压缩代码阶段进一步处理，确保移除这些代码后的文件能以最小体积呈现。
• OptimizeCSSAssetsPlugin：
  • 压缩代码：专门针对CSS文件进行压缩。它会优化CSS中的规则，移除冗余的CSS代码，例如合并重复的样式定义，缩短颜色值（如将#000000 转换为 #000）。这种压缩操作效率较高，能快速对CSS文件进行处理，在提升打包速度的同时，有效减小CSS文件体积。
  • 剔除未使用代码：结合PurgeCSS等工具，OptimizeCSSAssetsPlugin可以在打包时识别并剔除CSS中未被使用的样式规则。比如在项目中某些样式只定义了但在任何HTML元素中都未应用，PurgeCSS可以找出这些样式，然后OptimizeCSSAssetsPlugin在压缩过程中移除它们，进一步减小CSS文件体积，且不会过多影响打包速度。