JavaScript 中 Vite 怎么在生产构建时配置分块策略（Manual Chunks）优化浏览器缓存-js教程-PHP中文网

manualchunks 能提升缓存效率，因其将稳定依赖（如 vue、element plus、lodash-es）与易变业务代码分离打包，使依赖文件哈希长期不变，浏览器可强缓存；修改业务代码仅更新 index.js，避免全量重载。

javascript 中 vite 怎么在生产构建时配置分块策略（manual chunks）优化浏览器缓存

在 Vite 生产构建中配置 manualChunks，核心目标是把稳定不变的代码（如框架、UI 库、工具函数）和频繁变动的业务代码分开打包，让浏览器能长期缓存第三方依赖，只更新真正变化的部分。

为什么 manualChunks 能提升缓存效率

默认情况下，Vite 会把所有代码（含 Vue、lodash、路由、业务组件）打包进一个或少数几个文件。只要改一行业务逻辑，整个 JS 文件哈希值就变，浏览器无法复用旧缓存，必须重新下载全部内容。

启用 manualChunks 后，你可以明确指定：

vue、vue-router、pinia → 打进 framework.js
element-plus、@icon-park/vue → 打进 ui.js
lodash-es、dayjs、zod → 打进 utils.js
其余业务代码 → 留在 index.js 或按路由自动分块

这样，只要不升级 UI 库或工具包，ui.js 和 utils.js 的文件名哈希就不会变，用户二次访问直接命中强缓存。

基础对象式配置（推荐初用）

在 vite.config.ts 中写入：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        framework: ['vue', 'vue-router', 'pinia'],
        ui: ['element-plus', '@icon-park/vue'],
        utils: ['lodash-es', 'dayjs', 'zod']
      }
    }
  }
}

这种写法清晰直观，每个 key 是 chunk 名，value 是入口模块列表（及其所有依赖）。Vite 会自动把它们及其子依赖提取到对应 chunk 中。

进阶函数式配置（适配复杂场景）

当需要按路径、环境或稳定性做更细粒度控制时，用函数方式：

manualChunks(id) {
  if (id.includes('node_modules')) {
    if (id.includes('vue') || id.includes('pinia')) return 'framework'
    if (id.includes('element-plus') || id.includes('@icon-park')) return 'ui'
    if (id.includes('lodash-es') || id.includes('dayjs')) return 'utils'
  }
  if (id.includes('/src/views/') || id.includes('/src/pages/')) {
    return 'pages'
  }
}

注意：函数返回字符串即为 chunk 名；返回 undefined 则走默认分块逻辑。适合配合动态导入（defineAsyncComponent 或 import()）做路由级拆分。