配置 Tree Shaking 时常见的错误包括：
1. 未使用 ES6 模块语法
Tree Shaking 依赖于 ES6 模块的静态结构分析（import/export）。如果项目中混用 CommonJS 语法（如 require/module.exports），Tree Shaking 将失效。
错误示例：
// CommonJS 语法（不支持 Tree Shaking）
const utils = require('./utils');
正确做法：
// ES6 模块语法
import {
utils } from './utils';
2. 未启用生产模式
Webpack/Rollup 等构建工具默认只在生产模式下开启 Tree Shaking。
错误示例：
// webpack.config.js（开发模式未优化）
module.exports = {
mode: 'development', // 开发模式不会进行 Tree Shaking
};
正确做法：
// 启用生产模式
module.exports = {
mode: 'production',
};
3. 错误配置 sideEffects
package.json 中的 sideEffects 配置错误会导致有用代码被误删。
错误示例：
// 错误：所有模块都无副作用（实际可能有）
{
"sideEffects": false
}
正确做法：
// 明确列出有副作用的文件
{
"sideEffects": ["*.css", "src/init.js"]
}
4. 使用非静态导入/导出
动态导入（如 import('./module').then(...)）或在条件语句中导出会破坏 Tree Shaking。
错误示例：
// 动态导入（无法静态分析）
if (condition) {
import('./module');
}
正确做法：
// 静态导入（顶层声明）
import module from './module';
5. 未处理 CommonJS 依赖
如果项目依赖 CommonJS 模块（如 lodash），Tree Shaking 可能无法正确处理。
解决方案：
- 使用 ES6 版本的库（如
lodash-es）。 - 配置
rollup-plugin-commonjs或 Webpack 的babel-loader将 CommonJS 转换为 ES6。
6. 错误使用第三方库
部分库的设计可能不支持 Tree Shaking（如整体导入而非按需导入）。
错误示例：
// 整体导入（包含所有模块）
import _ from 'lodash';
_.map([1, 2, 3]);
正确做法：
// 按需导入（仅包含使用的模块）
import {
map } from 'lodash-es';
map([1, 2, 3]);
7. 插件配置冲突
某些构建工具插件可能会干扰 Tree Shaking。
错误示例：
- 使用
uglify-js而非terser（后者支持 ES6 模块）。 - 配置
babel-plugin-transform-runtime时未启用corejs选项。
8. 未压缩代码
即使 Tree Shaking 标记了未使用代码，若未启用压缩工具（如 Terser），这些代码仍会保留在 bundle 中。
解决方案：
确保生产环境配置中包含压缩插件：
// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimizer: [new TerserPlugin()],
},
};
9. 副作用代码未声明
某些模块可能有隐藏的副作用（如全局样式、Polyfill），但未在 sideEffects 中声明。
解决方案：
在 package.json 中明确列出有副作用的文件或模块：
{
"sideEffects": ["*.css", "src/polyfill.js"]
}
10. 未验证 Tree Shaking 效果
未通过工具检查打包结果，导致无法确认 Tree Shaking 是否生效。
验证方法：
- 使用
source-map-explorer分析打包文件：npx source-map-explorer dist/main.js - 对比生产环境和开发环境的 bundle 大小差异。
总结
Tree Shaking 的关键在于：
- 使用 ES6 模块语法。
- 启用 生产模式 和 代码压缩。
- 正确配置 sideEffects。
- 避免动态导入和非静态代码结构。
- 验证结果并按需调整配置。
