tree shaking 无法直接处理 dom 操作，因为 dom api（如 document.getelementbyid）是浏览器环境的全局对象，代码中只要引用了这些全局变量，打包工具就会认为该模块被使用。要解决此问题，需将 dom 操作封装在独立的 es module 文件中，并通过动态导入或条件编译来按需加载，从而让打包工具能够正确识别并移除未使用的代码。
为什么 Tree Shaking 会误判 DOM 操作？
Tree Shaking 依赖于静态分析 ES Modules 的导入导出关系。当你在主入口文件（如 index.js）中直接调用 document.querySelector 时，打包工具（如 Webpack 或 Vite）会检测到对全局对象 document 的访问。由于 document 并非通过 import 语句引入，打包工具无法确定这段代码是否真的需要执行，因此通常会保守地将其保留在最终 bundle 中，导致“死代码”未被剔除。
// index.js (Entry Point)
// 错误做法：直接调用全局 DOM API
const btn = document.getElementById('submit');
btn.addEventListener('click', () => {
console.log('Clicked');
});
// utils.js
export function init() {
// 这里虽然导出了函数，但上面的全局调用已污染入口
}
上述代码中，即使 utils.js 中的逻辑未被显式导入，但由于入口文件直接操作了 DOM，整个包含 DOM 操作的上下文可能被保留。更常见的情况是，你引入了一个大型 UI 库，其中包含了大量 DOM 操作，但你只用了其中一个按钮组件，此时 Tree Shaking 若配置不当，仍可能打包进所有 DOM 相关代码。
如何重构以支持 Tree Shaking？
正确的做法是将 DOM 操作与业务逻辑解耦。创建一个专门的模块（如 dom-utils.js）来封装所有 DOM 查询和操作，并确保该模块仅通过 export 暴露必要的函数。在主入口文件中，仅导入实际需要的函数。这样，打包工具就能清晰地看到哪些函数被使用，哪些未被使用，从而进行有效的摇树优化。
// dom-utils.js
export function getButton() {
return document.getElementById('submit');
}
export function hideElement(el) {
el.style.display = 'none';
}
// index.js
import { getButton } from './dom-utils.js';
const btn = getButton();
btn.addEventListener('click', () => {
console.log('Clicked');
});
// 注意：hideElement 未被导入，将被 Tree Shaking 移除
通过这种模块化拆分，hideElement 函数虽然在 dom-utils.js 中定义，但由于未在 index.js 中被导入，打包工具会将其标记为未使用并从最终输出中移除。这确保了只有实际调用的 DOM 操作代码被包含在 bundle 中。
动态导入如何处理运行时 DOM 操作？
对于某些仅在特定条件下才执行的 DOM 操作（如用户点击后才初始化的模态框），可以使用动态 import()。这种方式不仅支持 Tree Shaking，还能实现代码分割（Code Splitting），进一步减小首屏加载体积。动态导入返回一个 Promise，允许你在运行时按需加载包含 DOM 操作的模块。
// index.js
button.addEventListener('click', async () => {
const modalModule = await import('./modal.js');
modalModule.initModal();
});
// modal.js
export function initModal() {
const modal = document.getElementById('modal');
modal.classList.add('active');
}
在此示例中，modal.js 及其内部的 DOM 操作代码不会被打包到主 bundle 中，而是作为一个独立 chunk 存在。只有当用户点击按钮时，才会加载并执行这部分代码。这不仅优化了初始加载性能，也确保了 Tree Shaking 能准确识别动态导入路径下的代码使用情况。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
