分包与长效缓存
浏览器对每个域名有并发数限制（约 6 个），且所有代码打进一个 bundle 时，改任何一行都要让用户重新下载整个文件。分包（Code Splitting）把大包拆成小包：第三方依赖单独成包（变动的业务代码不拖累它）、路由按需加载（首屏只下载首页代码）。
分包后配“内容哈希文件名”（bundle.[contenthash].js）：文件内容不变则哈希不变，浏览器缓存继续生效；内容一变哈希即变，缓存自动失效。这就是“长效缓存”组合拳。
- 路由懒加载：
() => import("./home.vue")，访问时才下载该页代码 - 第三方单独分包：vue/react 这类不常变依赖拆出去，首屏走强缓存
- contenthash 文件名：内容不变缓存不失效，一变全换，最大限度利用缓存
优化
// 1. 路由懒加载（最有效的首屏优化，改一行就行） const routes = [ { path: '/', component: () => import('../views/Home.vue') }, // 懒加载 { path: '/user', component: () => import('../views/User.vue') }, ]; // 2. vite.config.js —— 手动分包 export default { build: { rollupOptions: { output: { manualChunks: { vue: ['vue', 'vue-router', 'pinia'], // 框架一家亲 ui: ['element-plus', '@element-plus/icons-vue'], // 组件库单独拆 }, chunkFileNames: 'assets/[name]-[hash].js', // 哈希文件名 }, }, }, }; // 效果对比（典型中后台）： // 优化前：app.js 2.4MB（改一行重下 2.4MB） // 优化后：vue.js 180KB（强缓存）+ ui.js 420KB（缓存）+ app.js 260KB（常变）
本节要点分包 + contenthash：第三方与路由各自拆包，改一小行只让一个小文件失效缓存。
