预编译pug能提速，因其将运行时缩进解析和ast生成移至构建阶段，产出html或js函数，避免浏览器cpu消耗；但仅对ssr/ssg有效，spa中无效且增负担。
预编译 Pug 模板确实能提升加载速度，但效果取决于使用场景——它只在服务端渲染（SSR）或静态站点生成（SSG）中直接生效；若你用的是纯客户端渲染（如 SPA 中通过 pug.render 动态调用），预编译反而增加构建负担且无实际收益。
为什么预编译能提速？关键在避免运行时解析
Pug 的缩进语法需在运行时被解析成 AST，再转为 HTML 字符串。浏览器执行这一步要消耗 CPU 和时间，尤其在低端设备或模板嵌套深、变量多时明显卡顿。预编译把这步挪到构建阶段，产出纯 HTML 或可执行 JS 函数（如 pug.compile 输出），运行时只需执行函数或插入字符串，跳过词法/语法分析。
注意：预编译 ≠ 预加载。它不减少网络请求数，也不压缩体积，只是把“解析开销”从用户侧转移到构建侧。
rolldown + @rolldown/plugin-pug：适合现代构建链的轻量方案
相比 Webpack + pug-loader，Rolldown 构建更快、内存占用更低，特别适合含大量 Pug 文件的 SSG 项目（如文档站、营销页）。它的插件默认启用缓存，且支持多入口独立编译，避免全量重跑。
-
input支持对象写法，例如{ home: './src/index.pug', blog: './src/blog.pug' }，每个入口生成独立 HTML -
pretty: false必须在生产环境关闭，否则生成带缩进的 HTML，体积增大 15%~30% - 插件不自动处理
include或extends中的相对路径依赖，需确保所有被引用的 Pug 文件都在input覆盖范围内，否则构建会静默跳过缺失文件
ng-html2js 类方案：仅适用于 AngularJS 项目，别乱套用
ng-html2js 把 Pug 编译结果包装成 AngularJS 的 $templateCache 注入逻辑，本质是“模板字符串 + 模块注册”，对 Vue/React 项目完全无效。它解决的是 AngularJS 启动时反复 HTTP 请求模板的问题，不是通用提速手段。
常见误用：
– 在非 AngularJS 项目里装 ng-html2js 并配置 Webpack，结果生成一堆无用 JS 模块
– 以为它能压缩 HTML，其实输出的是未压缩的字符串字面量
– 忽略其不支持 Pug 的高级特性（如过滤器、自定义函数），编译时报错但提示模糊
真正影响首屏速度的，往往是 HTML 之外的环节
预编译 Pug 对 TTFB（Time to First Byte）和 FCP（First Contentful Paint）几乎无改善。如果你的页面仍白屏数秒，优先检查：
– 服务端是否流式传输（Streaming HTML），还是等全部模板渲染完才吐出响应
– 是否在 HTML 中同步加载了大体积 JS（缺少 async 或 defer）
– 关键 CSS 是否内联，还是通过外链阻塞渲染
– CDN 是否命中，HTML 响应头是否启用 Brotli 压缩
预编译只是工具链中的一环，不是银弹。它省下的那几十毫秒，常被一个未优化的图片请求或一次慢查询吞掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
