Tree Shaking 能剔除未使用的组件库代码，但需库提供 ESM 入口、使用具名导入、正确配置 sideEffects，并配合按需导入插件验证生效。
在 JavaScript 中，用 import 导入第三方组件库的特定方法，关键在于看清该库是否支持**按需导入（tree-shaking 友好）**，以及它导出的方式是 default 还是 named export。
确认库的导出方式
多数现代 UI 库（如 Lodash、Day.js、Ant Design、Element Plus）会同时提供：
-
默认导出（default export）：通常是一个对象或主模块，比如
import _ from 'lodash' -
具名导出（named export）：导出多个独立函数/组件，比如
import { debounce, throttle } from 'lodash' -
路径导入（path import）：直接从子模块导入，减少打包体积，例如
import debounce from 'lodash/debounce'
常用写法示例
以几个典型库为例：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
-
Lodash：推荐路径导入（避免全量引入）
import debounce from 'lodash/debounce';import { throttle } from 'lodash';（如果已启用 babel-plugin-lodash 或构建工具自动优化） -
Day.js：插件需单独导入
import dayjs from 'dayjs';import relativeTime from 'dayjs/plugin/relativeTime';dayjs.extend(relativeTime); -
Ant Design（v5+）：组件支持具名导入
import { Button, message } from 'antd'; -
Vue 生态（如 Element Plus）：部分场景需解构 + 插件式注册
import { ElButton, ElMessage } from 'element-plus';
注意点和常见问题
导入失败或报错时，优先检查：
立即学习“Java免费学习笔记（深入）”；
- 包是否已安装：
npm install xxx或yarn add xxx - 库文档是否说明了 ESM 支持（有些老库只提供 CommonJS，需配置别名或插件）
- TypeScript 项目需确认是否有对应类型声明（
@types/xxx或库自带types字段） - Vite / Webpack 等工具默认支持 ESM，但若用 Node.js 原生 ES 模块，需确保
package.json有"type": "module"
不推荐的做法
以下方式容易导致体积膨胀或兼容性问题：
-
import * as _ from 'lodash'（全量引入，Tree-shaking 失效） -
import 'lodash'（仅执行副作用，未导入任何变量） - 从
dist目录手动导入未处理的 UMD 版本（如import 'lodash/dist/lodash.min.js'），失去静态分析能力
