说可以通过配置build.rollupOptions.output.manualChunks来提升一下，好可以，我来配置一下，把那些可能大的包单独分配一下：
build: {
rollupOptions: {
output: {
manualChunks: {
codemirror: ['codemirror'],
pinia: ['pinia'],
router: ['vue-router'],
// 将 vue 相关的模块打包到单独的 chunk
vue: ['vue'],
element: ['element-plus'],
// 将大型库或组件单独打包
largeLibrary: ['axios'],
},
},
},
},然后再看一下，是变小了，但是还是500警告啊：
那就开始分析是哪个包比较大吧，使用rollup-plugin-visualizer这个插件来分析一下，rollup-plugin-visualizer是一个开源项目，地址：github.com/btd/rollup-…
安装：
npm install vite-plugin-compression --save-dev配置插件
在 vite.config.js 文件中添加 rollup-plugin-visualizer 插件的配置，如下：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { visualizer } from 'rollup-plugin-visualizer'
import path from 'path'
const host = process.env.TAURI_DEV_HOST
// https://vitejs.dev/config/
export default defineConfig(async () => ({
plugins: [
vue(),
visualizer({
open: true, // 构建完成后会自动打开浏览器，显示可视化报告。如果您不想自动打开，可以设置为 false。
filename: 'stats.html', // 生成的报告文件名称
gzipSize: true, // 显示各文件在经过 gzip 压缩后的大小
brotliSize: true, // 显示各文件在经过 brotli 压缩后的大小
}),
],
// Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
//
// 1. prevent vite from obscuring rust errors
clearScreen: false,
// 2. tauri expects a fixed port, fail if that port is not available
server: {
port: 1420,
strictPort: true,
host: host || false,
hmr: host
? {
protocol: 'ws',
host,
port: 1421,
}
: undefined,
watch: {
// 3. tell vite to ignore watching `src-tauri`
ignored: ['**/src-tauri/**'],
},
},
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
build: {
rollupOptions: {
output: {
manualChunks: {
codemirror: ['codemirror'],
pinia: ['pinia'],
router: ['vue-router'],
// 将 vue 相关的模块打包到单独的 chunk
vue: ['vue'],
element: ['element-plus'],
// 将大型库或组件单独打包
largeLibrary: ['axios'],
},
},
},
},
}))
构建完成后，按照配置会自动生成报告 stats.html 文件。
如果配置为 open:true，则会在构建完成后自动打开报告页面：
如上图，打包文件占比较大的主要是以下 3 个包/文件：element-plus，edit，codemirror
所以，根据占比较大的文件去做针对性的优化即可。
对于elementui可以使用官方推荐的自动导入：快速开始 | Element Plus
配置完按需导入之后，就可以把main.ts里面的全量导入删除了：
然后再次打包就可以看到效果了：
分析报告：
