Tree Shaking 是构建时删除未使用代码，按需加载是运行时动态拆分并加载代码；前者依赖ES6静态模块分析，后者基于dynamic import()；二者互补协同优化体积与加载性能。
Tree Shaking 和按需加载（Code Splitting）都是前端构建阶段的关键优化手段，但它们作用的环节、解决的问题和实现机制完全不同。简单说：Tree Shaking 是“删代码”，按需加载是“分代码”——一个在构建时做减法，一个在运行时做拆分。
核心目标不同
Tree Shaking 的目标是消除未使用的导出（dead code），比如你只用了 lodash 里的 debounce，它会把其余几十个函数全剔掉，直接缩小最终打包体积。
按需加载的目标是把大块代码切成小块，在真正需要时才加载，比如点击“报表页”按钮后，再拉取对应的 JS 文件，避免用户一打开首页就下载所有页面逻辑。
发生时机与技术基础不同
Tree Shaking 完全发生在构建时，依赖 ES6 模块的静态结构（import/export）。工具通过静态分析依赖图谱，识别哪些导出没被任何 import 引用，就直接剪掉。它不关心运行时行为，也不需要改动业务逻辑。
按需加载则主要在运行时生效，靠的是动态 import() 语法。Webpack 或 Vite 会自动把 import('./module.js') 单独打包成一个 chunk，并在调用时触发网络请求。它改变的是资源加载时机，对模块本身是否冗余没有判断力。
配置与使用方式有明显差异
- 启用 Tree Shaking 需要：使用 ES6 模块语法、构建模式为
production、合理设置"sideEffects": false（或明确列出有副作用的文件） - 实现按需加载常见方式包括：
- 路由级：Vue Router 或 React Router 中用
component: () => import('./Page.vue') - 组件级：封装异步组件，如
defineAsyncComponent(() => import('./Dialog.vue')) - 功能级：点击按钮后执行
import('./utils/chart.js').then(...)
- 路由级：Vue Router 或 React Router 中用
二者可以协同增效
它们不是互斥关系，而是互补策略。例如：
- 先用 Code Splitting 把“报表模块”拆出来，单独打包为
report.chunk.js - 再在这个 chunk 内部启用 Tree Shaking，确保它只包含真正被
import('./report/chart')和import('./report/table')用到的工具函数，而不是整个 echarts + xlsx 库
没有 Code Splitting，Tree Shaking 再彻底也得把全部业务逻辑一起分析；没有 Tree Shaking，按需加载的 chunk 可能仍带着大量未用代码，体积反而失去意义。
