如何避免构建过程中非核心路由修改导致index chunk被更新？

直接拆分路由映射chunk方案 #

前置操作 #

• 将所有异步路由的动态导入逻辑统一抽离到单独的router-linker.js文件中，不要将该逻辑散落在入口文件或其他业务代码中，示例代码如下：

// router-linker.js
export const routerMap = {
  '/admin': () => import('./pages/admin.vue'),
  '/user': () => import('./pages/user.vue')
  // 其他路由映射
}

Webpack 环境配置 #

// webpack.config.js
module.exports = {
  output: {
    filename: (pathData) => {
      // 路由映射chunk不添加hash后缀
      if (pathData.chunk.name === 'router-linker') {
        return 'js/router-linker.js'
      }
      return 'js/[name].[contenthash].js'
    },
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        routerLinker: {
          test: /[\\/]router-linker\.js$/,
          name: 'router-linker',
          chunks: 'all',
          enforce: true,
          priority: 100,
        }
      }
    }
  }
}

Vite 环境配置 #

// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        chunkFileNames: (chunkInfo) => {
          if (chunkInfo.name === 'router-linker') {
            return 'js/router-linker.js'
          }
          return 'js/[name].[hash].js'
        },
        manualChunks(id) {
          if (id.includes('router-linker.js')) {
            return 'router-linker'
          }
        }
      }
    }
  }
})

服务器配套配置 #

对/js/router-linker.js路径配置响应头：

Cache-Control: no-store, no-cache, must-revalidate, proxy-revalidate

确保浏览器每次都请求最新的路由映射文件，不会缓存旧版本。

完成以上配置后，修改admin组件时只会更新admin chunk和router-linker文件，index chunk不会发生变化，普通用户不需要重新下载index chunk，仅需要拉取体积极小的无缓存router-linker文件即可。

备选更稳妥优化方案 #

如果担心无hash文件的缓存配置出错，可以选择不修改构建拆包逻辑，改用运行时加载路由的方案：

• 将路由映射表做成后端可配置的JSON文件，应用启动时先拉取该JSON获取各个异步chunk的最新地址，动态注册路由，映射表不需要打包到任何构建产物中，修改admin组件时仅需要更新JSON配置和admin chunk即可
• 也可以将admin路由单独作为远程组件/微应用接入，主应用的构建产物中不包含admin相关的任何映射逻辑，修改admin代码完全不影响主应用的chunk哈希

内容的提问来源于stack exchange，提问作者manidos