Vite 一些配置
约 187 字小于 1 分钟
2025-11-18
把 react 和 react-dom 单独拆分为 react-vendor chunk。
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
build: {
rollupOptions: {
output: {
// 核心包拆分为 react-vendor.js
manualChunks(id: string) {
if (id.includes('node_modules/react') || id.includes('node_modules/react-dom')) {
return 'react-vendor'
}
},
chunkFileNames(chunk) {
if (chunk.name === 'react-vendor') {
return 'assets/react-vendor.js' // 固定名称
}
return 'assets/[name]-[hash].js'
}
}
}
}
})说明
- manualChunks：把
react和react-dom单独拆分为react-vendorchunk。 - chunkFileNames：
react-vendor使用固定名称assets/react-vendor.js- 其他 chunk 按 Vite 默认
[name]-[hash].js
- 其他配置全部保持 Vite 默认行为（业务代码、CSS、静态资源等）。
核心包被单独拆分，文件名固定，其他 chunk 保持哈希。
可以直接部署，Vite 会自动在 index.html 中注入 react-vendor.js 的 <script type="module">。