javascript tree shaking 按需加载的实现依赖于 es modules (esm) 的静态结构特性，通过打包工具（如 webpack、vite）在构建阶段分析并移除未使用的代码。具体做法是确保使用 import 和 export 语法，并在构建配置中开启优化选项，这样最终产物只包含实际调用的函数或类，从而减小包体积。
如何正确编写可摇树的模块
要实现按需加载，必须使用标准的 ES Module 语法进行导出和导入。CommonJS 的 require 和 module.exports 因为支持动态执行，无法被静态分析工具可靠地识别，因此会导致 Tree Shaking 失效。开发者应确保所有库和内部模块都使用 export 暴露功能，并使用 import 引入所需部分。
// utils/math.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
// 这个函数不会被打包进最终文件
export function unused() {
console.log('I am not used');
}// main.js
import { add } from './utils/math';
console.log(add(1, 2));在上述代码中，main.js 仅导入了 add 函数。当构建工具处理这些文件时，它会检测到 subtract 和 unused 没有被任何入口文件引用，因此在生成的 bundle 中会完全剔除这两段代码。这种机制要求代码之间不能有副作用，即导入模块时不应改变全局状态或执行其他非导出逻辑。
立即学习“Java免费学习笔记（深入）”；
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
如何处理带有副作用的模块
有些模块虽然导出了函数，但在导入时会执行初始化代码或注册事件监听器，这被称为“副作用”。Tree Shaking 默认假设模块是无副作用的，如果存在副作用的代码被错误地摇掉，程序行为就会出错。为了解决这个问题，需要在构建配置中明确标记哪些模块具有副作用，或者将副作用逻辑与纯数据逻辑分离。
// sideEffectModule.js
// 这段代码会在导入时立即执行
console.log('Initializing global state');
export function init() {
return true;
}// package.json 配置示例
{
"sideEffects": false
}如果在 package.json 中将 sideEffects 设置为 false，构建工具会认为该包下的所有模块都是安全的，可以随意删除未使用的导出。但如果像上面的 sideEffectModule.js 这样有全局初始化代码，就需要将其列入白名单，例如设置为 ["./src/sideEffectModule.js"]，这样构建工具在保留该文件的同时，依然可以安全地移除其他未使用的导出函数。对于第三方库，通常由库作者提供此配置，开发者只需确保自己的代码符合这一规范即可。
为什么某些现代框架代码无法被完全摇树
在使用 React 或 Vue 等现代前端框架时，开发者可能会发现即使使用了 Tree Shaking，打包体积依然很大。这是因为许多框架的核心实现为了保持灵活性，采用了动态属性访问或运行时判断，破坏了静态分析的确定性。例如，React 的 createElement 或 Vue 的响应式系统往往依赖对象键的动态查找，使得打包工具难以确定哪些组件或方法真正被使用。
// React 示例：动态属性访问导致摇树困难 const component = components[name]; // name 是变量 return component();
在这种模式下，由于 name 的值在编译时是未知的，构建工具无法确定 components 对象中哪些属性会被访问到，因此往往会保守地将整个对象或相关模块全部打包。要缓解这一问题，开发者应尽量使用静态导入路径，避免动态字符串拼接来引用模块，或者利用框架提供的官方按需加载插件（如 @babel/plugin-transform-runtime 或 Vite 的自动解析），以确保只有实际渲染的组件被包含在最终产物中。
