Tree Shaking 能优化第三方库的按需引入，但前提是库本身支持、项目配置得当、引入方式正确。它不是自动生效的魔法，而是一套需要协同配合的工程实践。

Tree Shaking 生效的关键前提

Tree Shaking 能优化第三方库按需引入，但需库支持 ESM、正确配置 sideEffects、使用命名导入、配合自动组件引入插件，并通过构建分析验证效果。

确保第三方库提供 ESM 入口

只有基于 ES 模块（ESM）构建的库，才能被构建工具静态分析，并剔除未使用代码。

CommonJS（如 require）无法触发 Tree Shaking。

• 检查库的 package.json 是否声明了 "module": "es/index.js" 或类似字段，指向纯 ESM 入口文件
• 优先选用原生支持 ESM 的库，例如：lodash-es（代替 lodash）、date-fns（代替 moment）、Ant Design Vue / Element Plus / Vue DevUI
• 若库只提供 CommonJS 版本，可考虑用插件转换（如 vite-plugin-commonjs），但效果不如原生 ESM 可靠

用命名导入，禁用全量引入

导入写法会直接决定 Tree Shaking 是否能识别使用关系。

构建工具只能从 静态 import 语句 中推断依赖。

• 正确：使用解构式命名导入 —— import { debounce, throttle } from 'lodash-es'
• 错误：全量导入 —— import _ from 'lodash' 或 import * as antd from 'antd'，这会让整个模块保留在打包结果中
• 注意：某些库（如旧版 Bootstrap）即使用了命名导入，内部仍可能因路径别名或动态逻辑导致失效，此时需搭配 babel-plugin-import 或 unplugin-auto-import 自动转译路径

处理副作用，避免误删关键代码

如果一个模块执行时会注入样式、注册全局组件或修改原型链，构建工具会认为它有“副作用”。

这时即使你只用了其中一个小函数，整个文件也可能被保守保留。

• 在项目根目录的 package.json 中设置 "sideEffects": false，表示所有模块无副作用
• 若有真实副作用（比如引入 CSS 文件），必须显式列出："sideEffects": ["*.css", "*.scss", "./src/polyfill.js"]
• 避免在模块顶层写有实际影响的代码，例如：document.body.appendChild(...)、console.log('init')、Element.prototype.xxx = ...

模板中自动引入组件（Vue/React 场景）

仅靠 JS 层命名导入还不够。

Vue 模板里写了 却没手动 import，构建工具无法关联，可能导致全量加载或运行时报错。

• 推荐使用 unplugin-vue-components（Vite/Webpack/Rollup 均支持）
• 搭配对应 resolver，如 ElementPlusResolver()、AntDesignVueResolver()，插件会在编译时扫描模板标签，自动生成 import 和样式引入语句
• 无需手动 import 组件，也不用担心漏引或误引，真正实现“写即用、用即载”

如何验证 Tree Shaking 是否真正生效

最直接的办法，就是跑一遍生产构建，例如 vite build 或 next build。

构建完成后，用 rollup-plugin-visualizer 或 webpack-bundle-analyzer 打开产物报告。

重点查看组件库相关的 chunk。里面应该只保留实际用到的模块，而不该把整个 lib/ 目录一股脑打进去。

《夸克》非常好用的免费AI浏览器

下载APP查看