Q19 · 优化策略

Tree-shaking 原理是什么？

Tree-shakingESM死代码消除

⚡ 速记答案（30 秒）

基于 ESM 静态结构分析模块依赖
通过分析导入/导出关系，判断哪些导出从未被使用
在构建阶段移除无用导出对应的代码，从而减小 bundle
核心：静态分析（不能依赖运行时动态 require），配合压缩器（如 Terser）进一步消除死代码

📖 详细讲解

Tree-shaking 原理

前提条件

1. 使用 ESM（import/export）

2. 静态结构（编译时可确定依赖）

3. 无副作用（pure）

工作流程

1. 分析 import/export
2. 标记未使用的导出
3. 压缩时移除未使用代码

sideEffects 配置

{
  "sideEffects": false
}
// 或
{
  "sideEffects": ["*.css", "*.scss"]
}

常见问题

问题	原因
CSS 被删除	未配置 sideEffects
代码未删除	使用了 CommonJS
部分未删除	存在副作用

💻 代码示例

Tree-shaking 示例

// utils.js
export function used() {
  console.log('I am used');
}

export function unused() {
  console.log('I am NOT used');
}

// main.js
import { used } from './utils';
used();

// 打包后，unused 函数会被移除

💡

面试技巧：回答工程化问题时，结合你实际项目中的配置和优化经验，更有说服力。