🌳 Vite Tree Shaking 实战笔记核心原则：Vite 基于 Rollup 进行生产构建，天然支持 ESM。Tree Shaking 的核心在于 “静态分析” + “无副作用声明”。目标：只打包被引用的代码，剔除死代码（Dead Code），减小包体积。1. 前置检查清单 (Checklist)在开始优化前，确保满足以下基础条件：使用 ES Module (ESM)：代码中必须使用importexport，严禁在生产代码中使用require()。依赖库支持 ESM：优先选择提供.mjs或esm目录的库（如lodash-es而非lodash）。Babel 配置正确（如果用了 Babel）：确保@babelpreset-env中设置modules false，防止 ESM 被转译为 CommonJS。生产模式构建：Tree Shaking 的最终删除步骤通常在mode 'production'下由压缩器（esbuildTerser）执行。2. 三大核心策略策略一：依赖库的“按需引入” (最重要)很多体积膨胀源于引入了整个大型库。❌ 错误写法引入整个 lodash，即使只用了一个函数，也可能导致全量打包import_from'lodash';_.debounce(fn,300);Moment.js 巨大且难以 Shake，尽量避免importmomentfrom'moment';✅ 正确写法1.命名导入(Named Import)-静态分析友好import{debounce}from'lodash-es';debounce(fn,300);2.使用轻量级替代库importdayjsfrom'dayjs';比 moment 小得多import{format}from'date-fns';模块化设计，天然支持 Shake💡 UI 库自动化方案 (VueReact)不要手动 import 每个组件，使用插件自动按需加载。Vite 配置 (vite.config.js)importComponentsfrom'unplugin-vue-componentsvite';
