JavaScript 中 Tree Shaking 怎么让未引用的组件失效-js教程-PHP中文网

tree shaking 在构建时剔除未引用的 es 模块导出，而非运行时禁用组件；它依赖静态分析 import/export 关系，仅当组件被具名导入且无副作用时，未使用部分才被彻底移除。

javascript 中 tree shaking 怎么让未引用的组件失效

Tree Shaking 不会让“未引用的组件失效”，而是让未被引用的导出（export）在打包阶段被剔除——它不是运行时禁用组件，而是在构建时从最终 bundle 中彻底移除那些代码。

关键点在于：组件本身不会“失效”，但如果你没 import 它，它根本就不会进入依赖图，自然也不会被打包进去。

组件未被引用 → 不进打包流程

比如你用的是 Element Plus 或 Ant Design 这类支持模块化导出的 UI 库：

// ✅ 按需导入：只引入 ElButton，ElInput
import { ElButton, ElInput } from 'element-plus'

// ❌ 全量导入：整个库都进来了，Tree Shaking 无法帮上忙
import ElementPlus from 'element-plus'

Webpack 从入口开始构建依赖图，只顺着 import 关系往下走。ElButton 被 import，它的模块就被分析；没被 import 的 ElDrawer、ElTimeline 等，压根不会出现在依赖图里 —— 所以它们的代码不会被打包，也就“不存在于最终文件中”。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

让组件可被 Tree Shaking 的前提

组件必须是 ES 模块导出
例如：

// packages/components/button/index.ts
export { ElButton } from './src/button.vue'
export default ElButton

项目中不能把整个包当 CommonJS 引入
Babel 配置里要设 modules: false，否则 import { ElButton } 会被编译成 require('element-plus').ElButton，破坏静态分析。
第三方库自身要正确声明 sideEffects
比如 Element Plus 的 package.json 里写了：
```
"sideEffects": ["dist/*", "theme-chalk/**/*.css", "es/components/*/style/*"]
```
表示只有这些路径有副作用（比如样式注入），其余纯 JS 组件可安全摇掉。

常见“看似引用了，却摇不掉”的情况

导入了但没实际使用（比如只是 import 了，没在 JSX/模板里写 <eldialog></eldialog>）
```
import { ElDialog } from 'element-plus' // ❌ 没用到，但 import 语句存在 → 仍会进依赖图
```
这种情况下，Webpack 仍会保留 ElDialog 模块（因为 import 是静态声明），但若该模块内部没有副作用，且导出是具名的，它的 未被使用的子导出（比如某个工具函数）仍可能被摇掉。
使用了 import * as xxx 或 export * from，但没做深层静态分析
某些场景下 Webpack 对星号导入的分析较保守，建议优先用具名导入。
组件样式被单独引入（如 import 'element-plus/theme-chalk/button.css'）
这类导入通常被 sideEffects 显式保护，不会被摇，但 JS 逻辑部分仍可摇。