javascript tree shaking 失效通常是因为打包工具无法确定代码是否存在副作用，或者模块导出格式不符合静态分析的要求。要解决这个问题，需要确保使用 es modules (esm) 格式，在 package.json 中正确配置 sideeffects 字段，并避免使用 commonjs 或动态导入等破坏静态分析的语法。
为什么使用了 ESM 但样式文件未被移除？
当项目中引入了 CSS 或包含全局副作用的 JS 文件时，即使它们未被直接引用，Tree Shaking 也可能不会移除它们。这是因为打包工具默认假设所有模块都可能产生副作用。通过在 package.json 中设置 sideEffects 数组，可以明确告知打包工具哪些文件是安全的，从而允许其安全地移除未使用的模块。
{
"name": "my-app",
"version": "1.0.0",
"sideEffects": [
"*.css",
"src/polyfill.js"
]
}上述配置告诉 Webpack 或 Rollup，所有 .css 文件和 src/polyfill.js 具有副作用，不应被移除。而其他未列出的模块如果未被使用，则可以被安全地摇掉。
立即学习“Java免费学习笔记（深入）”；
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
CommonJS 模块如何影响 Tree Shaking？
CommonJS (CJS) 模块在运行时加载，其导出结构是动态的，这使得打包工具难以进行静态分析。因此，如果项目主要依赖 CJS 模块，Tree Shaking 的效果会大打折扣。建议将库转换为 ESM 格式，或者在构建时使用 @rollup/plugin-commonjs 等插件进行转换，以确保能够充分利用 Tree Shaking。
// index.js
import { add } from './math';
console.log(add(1, 2));
// math.js (ESM)
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}在这个例子中，index.js 只导入了 add 函数，而 subtract 函数未被使用。如果使用 ESM 格式，打包工具可以识别出 subtract 是未使用的，并将其从最终包中移除。但如果 math.js 使用的是 CJS 格式，如 module.exports = { add, subtract }，则可能无法有效移除未使用的导出。
动态导入对 Tree Shaking 的影响是什么？
动态导入（Dynamic Import）允许在运行时加载模块，这虽然提供了灵活性，但也破坏了静态分析的完整性。打包工具无法在构建时确定哪些模块会被实际加载，因此可能会保留所有可能被动态导入的模块，导致 Tree Shaking 失效。为了优化这一点，应尽量减少动态导入的使用，或在可能的情况下将其转换为静态导入。
