Rollup的tree-shaking对HTML内联脚本无效,因其仅分析ES模块导入链;内联代码属全局作用域,无import/export,Rollup视作黑盒,必须抽离为独立JS文件并作为input引入才能生效。

Rollup的tree-shaking对HTML中内联脚本无效
直接写在<script>标签里的JS代码,Rollup完全看不到——它只处理ES模块输入文件。哪怕你用type="module",浏览器加载时也是独立执行,Rollup无法分析其依赖或剪枝。
常见错误现象:rollup -c构建后体积没变小,但检查输出发现大量未调用函数还在;其实那些函数根本不在Rollup的输入图里。
- Rollup的tree-shaking只作用于
import/export构成的静态模块图 -
<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>
改成模块化写法:
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图,自动匹配视觉风格。触发场景:文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
// 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>,而是你有没有把逻辑放进模块、有没有让Rollup看见它的出口和入口。这点容易被忽略,但决定了shaking能不能动真格。


















