说可以通过配置build.rollupOptions.output.manualChunks来提升一下，好可以，我来配置一下，把那些可能大的包单独分配一下：

复制 1    build: {
 2        rollupOptions: {
 3            output: {
 4                manualChunks: {
 5                    codemirror: ['codemirror'],
 6                    pinia: ['pinia'],
 7                    router: ['vue-router'],
 8                    // 将 vue 相关的模块打包到单独的 chunk
 9                    vue: ['vue'],
10                    element: ['element-plus'],
11                    // 将大型库或组件单独打包
12                    largeLibrary: ['axios'],
13                },
14            },
15        },
16    },

然后再看一下，是变小了，但是还是500警告啊：

那就开始分析是哪个包比较大吧，使用rollup-plugin-visualizer这个插件来分析一下，rollup-plugin-visualizer是一个开源项目，地址：github.com/btd/rollup-…

安装：

复制 1npm install vite-plugin-compression --save-dev

配置插件

在 vite.config.js 文件中添加 rollup-plugin-visualizer 插件的配置，如下：

复制 1import { defineConfig } from 'vite'
 2import vue from '@vitejs/plugin-vue'
 3import { visualizer } from 'rollup-plugin-visualizer'
 4import path from 'path'
 5
 6const host = process.env.TAURI_DEV_HOST
 7
 8
 9export default defineConfig(async () => ({
10    plugins: [
11        vue(),
12        visualizer({
13            open: true, 
14            filename: 'stats.html', 
15            gzipSize: true, 
16            brotliSize: true, 
17        }),
18    ],
19    
20    
21    
22    clearScreen: false,
23    
24    server: {
25        port: 1420,
26        strictPort: true,
27        host: host || false,
28        hmr: host
29            ? {
30                  protocol: 'ws',
31                  host,
32                  port: 1421,
33              }
34            : undefined,
35        watch: {
36            
37            ignored: ['**/src-tauri/**'],
38        },
39    },
40    resolve: {
41        alias: {
42            '@': path.resolve(__dirname, 'src'),
43        },
44    },
45    build: {
46        rollupOptions: {
47            output: {
48                manualChunks: {
49                    codemirror: ['codemirror'],
50                    pinia: ['pinia'],
51                    router: ['vue-router'],
52                    
53                    vue: ['vue'],
54                    element: ['element-plus'],
55                    
56                    largeLibrary: ['axios'],
57                },
58            },
59        },
60    },
61}))

构建完成后，按照配置会自动生成报告 stats.html 文件。

如果配置为 open:true，则会在构建完成后自动打开报告页面：

 

如上图，打包文件占比较大的主要是以下 3 个包/文件：element-plus，edit，codemirror

所以，根据占比较大的文件去做针对性的优化即可。

对于elementui可以使用官方推荐的自动导入：快速开始 | Element Plus

配置完按需导入之后，就可以把main.ts里面的全量导入删除了：

然后再次打包就可以看到效果了

分析报告：