JavaScript Tree Shaking 中怎么处理第三方库的按需引入-js教程-PHP中文网

tree shaking 起效需第三方库支持 esm、无副作用且导出规范；应查 package.json 的 "module" 和 "sideeffects" 字段，优先选 ant design、lodash-es 等已验证库，正确使用命名导入，配合 css 按需加载插件，并通过构建产物验证效果。

javascript tree shaking 中怎么处理第三方库的按需引入

Tree Shaking 要起作用，第三方库本身得“配合”——不是你写了 import { Button } from 'xxx' 就自动按需，关键看库是否支持 ESM、有无副作用、引入方式是否规范。

确认库是否原生支持 Tree Shaking

先查它的 package.json：

有没有 "module": "es/index.js" 或类似字段（指向纯 ESM 入口）
有没有 "sideEffects": false，或明确列出副作用文件（如 ["*.css"]）
源码是否用 export 拆分导出每个组件，而不是只暴露一个默认对象

推荐优先选用已验证支持的库：Ant Design、Element Plus、BaseUI、Vue DevUI、lodash-es（不是 lodash）、date-fns 等。它们从结构上就为按需引入设计。

写对 import 语句，避免全量加载

错误写法会直接关闭 Tree Shaking 通道：

Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载

import antd from 'antd'（默认导入 → 整个包被保留）
import * as antd from 'antd'（命名空间导入 → 构建工具无法追踪具体使用项）
import _ from 'lodash'（CommonJS 风格 → 无静态分析能力）

正确做法是命名导入或路径导入：

import { Button, Modal } from 'antd'
import debounce from 'lodash-es/debounce'
import { format } from 'date-fns'

处理 CSS 样式按需加载

CSS 本身不参与 Tree Shaking，必须靠 JS 层触发 + 插件辅助：

手动配：引入组件的同时，显式导入对应样式，如 import 'element-plus/theme-chalk/button.css'
自动配：用 unplugin-vue-components（Vue）或 babel-plugin-import（React）+ 对应 resolver，它会在编译时扫描模板/JSX 中的组件标签，自动注入 JS 和 CSS 的 import
注意：如果用了自动注册但没配 dirs 或 deep: true，子组件可能漏识别，样式就丢了