HTML打包策略：配置Vite多页面打包优化体积的方法-html教程-PHP中文网

多页面打包时 chunk 重复问题需按入口隔离分包逻辑，通过 manualchunks 函数识别入口路径（如 id.includes('src/pages/home/')）区分页面业务代码，第三方依赖统一提取但排除 cdn 外部化包，并按功能域分组 vendor（如 home-vendor、admin-vendor），公共基础依赖提为 shared 复用。

html打包策略：配置vite多页面打包优化体积的方法

多页面打包时 chunk 重复问题怎么解决

默认情况下，Vite 的 build.rollupOptions.output.manualChunks 对所有入口统一生效，但多页场景下容易把不同页面共用的模块（比如 vue、pinia）重复打进每个 HTML 的 chunk 里，导致体积膨胀且缓存失效。

关键不是“分包”，而是“按入口隔离分包逻辑”。你需要在 manualChunks 函数中识别当前 chunk 所属的入口文件路径：

用 id.includes('src/pages/home/') || id.includes('src/pages/dashboard/') 区分不同页面的业务代码，避免混入其他页逻辑
第三方依赖仍走统一提取，但需排除已由 CDN 外部化的包（如 vue、axios），否则会冗余打包
若使用 vite-plugin-html 配置多入口，确保每个 html 文件的 entry 路径唯一，否则 Rollup 无法正确归因 chunk 来源

多个 HTML 入口如何控制 vendor 分包粒度

多页项目里，vendor 分包太粗（全打成一个 vendor.js）或太细（每个页面都生成独立 echarts chunk）都不合理。真正有效的策略是“按页面功能域分组”：

首页用图表库 → 提取 echarts + zrender 到 home-vendor
后台页用表格组件 → 提取 ant-design-vue 相关模块到 admin-vendor
公共基础依赖（vue、vue-router、pinia）单独提为 shared，所有页面复用

配置示例（注意 id 是绝对路径，需匹配你实际的 src 结构）：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

manualChunks(id) {
  if (id.includes('src/pages/home/')) {
    if (id.includes('node_modules/echarts')) return 'home-vendor';
  }
  if (id.includes('src/pages/admin/')) {
    if (id.includes('node_modules/ant-design-vue')) return 'admin-vendor';
  }
  if (id.includes('node_modules/vue') || id.includes('node_modules/vue-router')) {
    return 'shared';
  }
}

多页打包后 CSS 没分离，样式互相污染怎么办

Vue 单文件组件的 <style></style> 默认会被 Rollup 合并进 JS chunk，多页共用时容易出现样式覆盖。这不是 bug，是默认行为，必须显式干预：

启用 build.cssCodeSplit: true（Vite 4.3+ 默认开启，旧版本需手动设）
配合 rollupOptions.output.assetFileNames 单独输出 CSS，避免和 JS 混在一起：assetFileNames: 'css/[name]-[hash].[ext]'
如果用了 unplugin-vue-components，确保其自动导入的组件样式也走 CSS 提取逻辑，否则仍会内联进 JS

特别注意：CSS 提取后，Vite 不再自动注入 <link> 标签到 HTML —— 你得用 vite-plugin-html 的 inject 功能或手动维护 index.html 模板。

为什么开了 gzip 但 Nginx 没生效，反而体积变大了

常见错觉：装了 vite-plugin-compression 就等于线上启用了压缩。实际上它只生成 .gz 文件，不负责传输时的协商与响应头设置。

检查 Nginx 是否加载了 gzip on 和 gzip_types（必须包含 text/css application/javascript）
确认 Nginx 的 gzip_static on 已启用，否则不会读取构建生成的 .gz 文件
浏览器 Network 面板看响应头：若无 Content-Encoding: gzip，说明服务端没生效；若有但体积比未压缩还大，大概率是 threshold 设得太低（比如 1024），小文件被强行压缩反而膨胀