vite 分包，rollup 配置
在 vite 里管理 js 体积过大问题
01 创建 vite 项目
创建项目
yarn create vite . --template react-ts02 vite 核心配置如下
配置
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
build: {
rollupOptions: {
output: {
manualChunks: (id) => {
if (id.includes('node_modules/@jswork')) return 'vendor-jsw';
if (id.includes('node_modules/react')) return 'vendor-react';
if (id.includes('node_modules/lodash')) return 'vendor-lodash';
}
}
}
}
});03 简单的配置
这种适合简单的项目
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
build: {
rollupOptions: {
output: {
manualChunks: {
react: ['react', 'react-dom'],
lodash: ['lodash']
}
}
}
}
});04 分包前后对比
分包前
VS分包后
| 分包前 | 分包后 |
|---|---|
| |