Rspack 的 Tree Shaking 是如何工作的？ - 面试题

Tree Shaking 是现代前端构建工具的重要优化技术，Rspack 实现了高效的 Tree Shaking 功能，能够有效移除未使用的代码，减少打包体积。以下是 Rspack Tree Shaking 的详细说明：

Tree Shaking 基本原理

Tree Shaking 的核心思想是通过静态分析模块的导入和导出关系，识别并移除未被使用的代码。就像摇晃树木，枯死的叶子会掉落一样，未使用的代码会被"摇晃"掉。

Rspack Tree Shaking 的工作机制

静态分析：
- 分析 ES Module 的 import/export 语法
- 构建模块依赖图
- 识别导出的内容是否被使用
标记未使用代码：
- 标记未被引用的导出
- 标记未被使用的函数和变量
- 分析副作用（side effects）
代码移除：
- 在代码生成阶段移除未使用的代码
- 优化最终的 bundle 大小
- 保持代码的正确性

ES Module 的作用

Tree Shaking 只对 ES Module 有效，因为：

ES Module 的导入导出是静态的，可以在编译时分析
CommonJS 的 require 是动态的，无法进行静态分析
ES Module 的结构更清晰，便于分析依赖关系

javascript
// ES Module - 支持 Tree Shaking
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// 只导入 add，subtract 会被 Tree Shaking 掉
import { add } from './math';

// CommonJS - 不支持 Tree Shaking
module.exports = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b
};

副作用（Side Effects）处理

副作用是指模块在导入时会产生某些影响，如修改全局变量、执行某些操作等。Rspack 提供了多种方式处理副作用：

package.json 配置：
```
json
{
  "name": "my-package",
  "sideEffects": false
}
```
- false：表示模块没有副作用，可以安全地进行 Tree Shaking
- true：表示模块有副作用，不能进行 Tree Shaking
- 数组：指定有副作用的文件

在配置中指定：

javascript
module.exports = {
  optimization: {
    usedExports: true,
    sideEffects: true
  }
}

优化配置

Rspack 提供了多个优化选项来增强 Tree Shaking 效果：

javascript
module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true, // 标记未使用的导出
    sideEffects: true, // 处理副作用
    minimize: true, // 启用代码压缩
    concatenateModules: true // 模块连接
  }
}

实际应用示例

工具库优化：

javascript
// utils.js
export const formatDate = (date) => { /* ... */ };
export const parseDate = (date) => { /* ... */ };
export const validateDate = (date) => { /* ... */ };

// main.js
import { formatDate } from './utils';
// parseDate 和 validateDate 会被 Tree Shaking 掉

组件库优化：

javascript
// components.js
export { Button } from './Button';
export { Input } from './Input';
export { Modal } from './Modal';

// App.js
import { Button } from './components';
// Input 和 Modal 会被 Tree Shaking 掉

第三方库优化：

使用支持 Tree Shaking 的库（如 lodash-es）
避免导入整个库

javascript
// 不推荐
import _ from 'lodash';

// 推荐
import { debounce } from 'lodash-es';

注意事项

确保使用 ES Module：
- 在 package.json 中设置 "type": "module"
- 或使用 .mjs 扩展名
- 或在配置中启用 ES Module 支持
正确处理副作用：
- 仔细评估模块是否有副作用
- 避免错误标记导致代码被误删
- 测试 Tree Shaking 后的功能
生产环境测试：
- 在生产环境验证 Tree Shaking 效果
- 检查打包体积是否减少
- 确保功能正常
代码风格：
- 使用具名导出而非默认导出
- 避免在模块顶层执行副作用操作
- 保持代码的模块化和可分析性

性能优化建议

分析打包结果：
- 使用 Rspack 的分析工具查看哪些代码被移除
- 识别可以进一步优化的模块
- 监控 Tree Shaking 效果
优化导入方式：
- 使用具名导入而非默认导入
- 避免导入整个模块
- 使用动态导入按需加载
选择合适的库：
- 优先选择支持 Tree Shaking 的库
- 避免使用有副作用的库
- 考虑使用更轻量的替代方案

Rspack 的 Tree Shaking 功能为开发者提供了强大的代码优化能力，通过合理的配置和使用，可以显著减少打包体积，提升应用性能。