rollup的tree-shaking对html内联脚本无效，因其仅分析es模块导入链；内联代码属全局作用域，无import/export，rollup视作黑盒，必须抽离为独立js文件并作为input引入才能生效。
Rollup的tree-shaking对HTML中内联脚本无效
直接写在<script></script>标签里的JS代码，Rollup完全看不到——它只处理ES模块输入文件。哪怕你用type="module"，浏览器加载时也是独立执行，Rollup无法分析其依赖或剪枝。
常见错误现象：rollup -c构建后体积没变小，但检查输出发现大量未调用函数还在；其实那些函数根本不在Rollup的输入图里。
- Rollup的tree-shaking只作用于
import/export构成的静态模块图 -
<script></script>内联代码属于“全局作用域”，无导出、无导入，Rollup视作黑盒 - 即使内联脚本里写了
export，浏览器会报错：Uncaught SyntaxError: Unexpected token 'export'
必须把HTML中的逻辑拆进ES模块文件
想让tree-shaking生效，得把业务逻辑从HTML里抽出来，保存为.js文件，并用import方式引入。Rollup才能识别哪些export被用、哪些没被引用。
使用场景：比如一个按钮点击弹alert，原来写在HTML里：
<button id="btn">Click</button>
<script>
document.getElementById('btn').onclick = () => alert('hello');
</script>
改成模块化写法：
// main.js
export function handleClick() {
alert('hello');
}
// index.html
<button id="btn">Click</button>
<script type="module" src="./main.js"></script>
再在Rollup配置中把main.js设为input，tree-shaking才开始工作。
- 确保
output.format设为'es'或'iife'（'cjs'会破坏shaking） - 如果用了
export default，且只在某处import了命名导出，default部分仍可能保留——避免混用default与named export - 动态
import()会被视为运行时依赖，对应模块不会被shaking掉
HTML中引用的外部脚本需显式声明为Rollup输入
Rollup不会自动扫描HTML里的src属性。你写了<script src="utils.js"></script>，Rollup默认忽略它——除非你在rollup.config.js里手动把它加进input数组。
参数差异：input支持字符串、数组、甚至异步函数返回路径，但不支持glob通配HTML里所有src。
- 推荐做法：用
input: ['main.js', 'utils.js']明确列出所有参与构建的入口 - 若HTML里引用的是CDN地址（如
https://cdn.example.com/lib.js），Rollup无法处理，tree-shaking自然失效 - 注意路径是相对于rollup配置文件的位置，不是HTML所在目录
混淆和压缩不是tree-shaking，别混淆效果
很多人看到构建后体积变小，就以为是tree-shaking起了作用。其实可能是terser插件删了空格、重命名变量、折叠常量——这些跟是否引用无关。
验证是否真有shaking：在源码里写一个明显没被调用的export function unused() { ... }，构建后搜索输出文件里是否还存在unused字符串。存在→shaking没生效；不存在→才说明起效了。
- Rollup默认开启tree-shaking，但前提是模块间有明确的
import/export关系 - CommonJS模块（
require/module.exports）默认不支持shaking，需用@rollup/plugin-commonjs转换，且仍有局限 - 副作用（side effects）标记很重要：
"sideEffects": false在package.json里能帮Rollup安全删除整个模块文件
真正起作用的，从来不是HTML里那几行<script></script>，而是你有没有把逻辑放进模块、有没有让Rollup看见它的出口和入口。这点容易被忽略，但决定了shaking能不能动真格。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
