Vite Tree Shaking 实战笔记

🌳 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';