html本身不支持tree-shaking，因其非模块化语言；真正实现需构建工具（如vite/webpack）对esm模块静态分析，并配合正确import语法、production模式、sideeffects配置及纯模块设计。
HTML 编辑器本身无法实现 Tree-shaking —— 因为 Tree-shaking 是构建阶段对 ESM JavaScript 模块的静态分析过程，而 HTML 不是模块，也没有 import/export 语法。 所有试图在 HTML 文件里“做 Tree-shaking”的方案，本质都是混淆了概念，真正要做的，是让编辑器背后的构建系统（如 Webpack、Vite、Rollup）正确识别并剔除未使用的 JS/CSS 资源，再通过 HTML 控制加载时机。
为什么 <script></script> 标签直接引入会破坏 Tree-shaking
常见错误是把组件库或工具函数全量挂载到全局，比如：
<script src="node_modules/lodash/lodash.min.js"></script><script>console.log(_.debounce);</script>
这种写法导致：Webpack 无法追踪 _.debounce 是否被实际调用（因为是运行时属性访问），也无法标记其他未用方法为 dead code；同时，lodash.min.js 是 UMD/CommonJS 打包产物，不含 export，根本进不了 Tree-shaking 流程。
- 必须改用 ESM 方式导入：
import { debounce } from 'lodash-es' - 确保包提供
"module"字段（如lodash-es有，lodash没有） - 避免在 HTML 中用
onclick="doSomething()"或data-func="xxx"动态调用，这会让打包工具保守保留所有导出项
HTML 编辑器中如何配合实现“按需加载”效果
所谓“HTML 编辑器中的按需加载”，实际是利用 HTML 的能力控制资源加载时机，而非参与代码剔除。关键点在于：不把资源塞进初始 HTML，而是由 JS 动态触发。
- 路由级拆分：用
import()加载页面组件，HTML 只保留一个空<div id="app"></div> - 条件加载：编辑器检测用户点击「表格」按钮后，才
import('./features/table-editor.js') - 懒加载图片/iframe：
<img loading="lazy" src="...">或<iframe loading="lazy"></iframe> - 避免内联脚本执行逻辑，例如不要写
<script>initEditor();</script>，改用 DOMContentLoaded 后按需调用
构建配置里哪些设置决定 Tree-shaking 是否生效
即使你写了正确的 import { foo } from 'lib'，如果构建配置不对，Tree-shaking 依然不会工作。
- Webpack 必须启用
mode: 'production'（开发模式默认关闭） - 确认
optimization.usedExports: true和minimizer使用 Terser（它负责最终删除 dead code） - 检查第三方库是否有
"sideEffects": false（如lodash-es、date-fns有，moment没有） - 禁止在
package.json中将库设为externals，否则整个模块被跳过分析 - 使用
npx webpack-bundle-analyzer dist/stats.json查看产物中是否真没包含未引用的函数
容易被忽略的副作用陷阱
哪怕你只写了 import { throttle } from 'lodash-es'，如果该模块内部有顶层副作用（如向 window 注入变量、修改原型、发起请求），Webpack 就不敢摇掉它——因为无法确认移除是否影响运行时行为。
- 查看源码或文档确认模块是否“pure”；
lodash-es大部分函数是纯的，但lodash-es/lang下某些导出可能含副作用 - 若必须用带副作用的模块，显式标注：
/*#__PURE__*/ throttle(...)告诉压缩工具此处可安全移除 - 避免在 ESM 模块顶层写
console.log、fetch、localStorage.setItem等语句
真正需要盯住的不是 HTML 文件本身，而是构建产物里 JS chunk 的内容和依赖图；HTML 只是入口容器和加载策略的声明层，它既不参与摇树，也不决定哪些代码该存在——那是 import 语句 + 构建配置 + 库自身模块设计共同决定的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
