vite项目打包build后提示说超过500k了

说可以通过配置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


export default defineConfig(async () => ({
    plugins: [
        vue(),
        visualizer({
            open: true, 
            filename: 'stats.html', 
            gzipSize: true, 
            brotliSize: true, 
        }),
    ],
    
    
    
    clearScreen: false,
    
    server: {
        port: 1420,
        strictPort: true,
        host: host || false,
        hmr: host
            ? {
                  protocol: 'ws',
                  host,
                  port: 1421,
              }
            : undefined,
        watch: {
            
            ignored: ['**/src-tauri/**'],
        },
    },
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src'),
        },
    },
    build: {
        rollupOptions: {
            output: {
                manualChunks: {
                    codemirror: ['codemirror'],
                    pinia: ['pinia'],
                    router: ['vue-router'],
                    
                    vue: ['vue'],
                    element: ['element-plus'],
                    
                    largeLibrary: ['axios'],
                },
            },
        },
    },
}))

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

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

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

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

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

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

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

分析报告：