Webpack的Tree Shaking机制

Wed, 05 Mar 2025 09:59:05 +0000

考察点分析

本题主要考察候选人对前端工程化工具的深层理解，重点关注：

评估点包括：ES模块与CJS模块差异理解、DCE优化原理、Side Effects处理、Webpack构建流程中的标记-消除两阶段机制。

Webpack的Tree Shaking分为两个阶段：

标记阶段：构建依赖图时通过静态分析识别未被引用的export
- 基于ESTree规范的AST分析，识别有效引用链
- 通过harmony export等标记记录导出使用情况
消除阶段：在压缩阶段通过Terser等工具移除标记代码
- 依赖/*#__PURE__*/等注释判断函数副作用
- 结合作用域分析进行安全的代码删除

Webpack的Tree Shaking通过静态分析ES Modules的导入导出关系，标记未使用的代码并在压缩阶段移除。其生效需要三个条件：

典型配置示例：

 // webpack.config.js
module.exports = {
 mode: 'production',
 optimization: {
 usedExports: true, // 启用导出使用标记
 minimize: true // 启用代码压缩删除
 }
}

代码规范要求：