javascript tree shaking 的最佳实践是确保使用 es modules (esm) 语法编写代码，并在构建工具（如 webpack、vite）中正确配置 sideeffects 属性。这能让打包器安全地移除未使用的导出和纯函数代码，从而显著减小最终包体积。
如何配置 sideEffects 以保留副作用代码
在 package.json 或构建配置中声明 sideEffects 数组，明确列出包含副作用的文件路径。这样打包器可以安全地删除其他未引用的模块，同时保留样式文件或全局脚本的执行逻辑。
{
"name": "my-library",
"version": "1.0.0",
"sideEffects": [
"src/polyfill.js",
"*.css"
]
}上述配置告诉打包器：除了 src/polyfill.js 和所有 CSS 文件外，其他 JS 文件如果没有被导入，就可以被安全地丢弃。如果某个 JS 文件虽然未被直接导入，但执行它会修改全局状态（例如注册一个自定义元素），则必须将其加入此列表，否则会被误删。
立即学习“Java免费学习笔记（深入）”；
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
为什么 CommonJS 无法进行 Tree Shaking
CommonJS (CJS) 的 require() 是动态执行的，打包器在静态分析阶段无法确定其返回值是否包含完整的对象结构。因此，即使你只使用了 CJS 模块中的一个属性，打包器通常也会引入整个模块，导致无法有效摇树。
// index.js
const { add } = require('./math'); // 可能引入整个 math.js
console.log(add(1, 2));
// math.js
module.exports = {
add: (a, b) => a + b,
remove: (a, b) => a - b // 永远无法被摇掉
};将上述代码转换为 ESM 后，打包器可以精确识别只有 add 被使用，从而移除 remove 函数。这是实现高效 Tree Shaking 的基础前提。
如何处理带有副作用的库依赖
当项目中引入了第三方库，且该库通过全局变量暴露 API 或执行了副作用时，需要特殊处理以避免打包器错误地优化掉关键代码。可以通过别名配置或显式导入来管理这些依赖。
// 假设 lodash-es 是 ESM 版本
import _ from 'lodash-es'; // 引入整个库，无法摇树
import { debounce } from 'lodash-es'; // 仅引入 debounce，可摇树
// 对于非 ESM 库，可能需要这样处理
import 'some-legacy-lib/register'; // 显式导入以触发副作用在使用第三方库时，优先选择提供 ESM 入口的版本。如果必须使用 CJS 库，考虑使用 rollup-plugin-commonjs 等插件进行转换，或者接受其无法被完全摇树的现实，仅通过按需导入最小化影响。
