Vite代码分割需动态导入+manualChunks+路由协同实现：用import()懒加载页面，manualChunks分离第三方和业务模块，CSS随JS chunk异步注入，全局样式手动引入。
在 Vite 构建中配置代码分割，核心是让首屏只加载必要代码，其余模块按需加载、独立缓存。它不是靠单一开关实现的，而是动态导入 + 手动分包 + 路由结构协同的结果。
用 import() 触发页面级懒加载
这是最直接、最有效的方式。Vite 会自动把 import('./Page.vue') 及其依赖（包括组件内样式、子组件、工具函数）打包成单独 chunk，并在导航时异步加载。
- Vue Router 中写法：
{ path: '/dashboard', component: () => import('./views/Dashboard.vue') } - React Router v6.4+ 配合
Suspense和loader，同样触发独立 chunk 生成 - 避免在入口文件或 Layout 组件里静态
import './global.css'，否则样式会打进主包，无法拆分
通过 manualChunks 分离稳定依赖
在 vite.config.js 的 build.rollupOptions.output.manualChunks 中定义规则，把第三方库或公共模块抽成独立 JS 文件，提升长期缓存命中率。
- 按库分组（推荐函数形式，避免空 chunk）：
vue-vendor: ['vue', 'vue-router', 'pinia']ui-vendor: ['element-plus', '@element-plus/icons-vue'] - 按路径抽离业务共用模块：
utils: /src\/utils\/.*\.ts$/→ 把所有src/utils/下的文件打到一个 chunk - 注意：这个配置只影响 JS，对 CSS 无控制力；也不能靠它让 Tailwind 延迟加载
配合预构建和压缩进一步减小体积
代码分割后，每个 chunk 的大小仍需优化。Vite 的预构建和压缩能力可以叠加生效：
立即学习“Java免费学习笔记（深入）”；
- 显式
optimizeDeps.include高频包（如echarts），确保它们被提前转为 ESM 并缓存 - 设置
optimizeDeps.esbuildOptions.minify = true，压缩预构建后的依赖代码 - 启用
build.minify: 'terser'，对最终产出做更深度的 JS 压缩 - 图片资源用
vite-plugin-imagemin或内置assetInlineLimit控制是否转 base64
CSS 按需加载要靠结构，不是靠配置
Vite 默认 cssCodeSplit: true 只是物理拆分文件，不会改变加载时机。真正让 CSS 异步加载，必须让它随 JS chunk 一起生成和注入：
- 只有动态导入的组件里的
<style></style>，才会被打进对应 chunk，并在该 chunk 加载时自动插入<style></style>标签 - 全局样式（重置、字体、基础变量）建议用
<link rel="stylesheet">手动引入关键 CSS，其余交由动态导入触发 - UI 库样式必须跟随组件一起动态导入，例如
import('element-plus').then(() => import('./MyComponent.vue'))，否则样式仍进 vendor
