Vue3之vite打包优化方式

import {defineAsyncComponent} from "vue"
const MyDiagram = defineAsyncComponent(()=>import("./components/myDiagram.vue"))

yarn add --dev rollup-plugin-visualizer

//vite.config.js

import {visualizer} from "rollup-plugin-visualizer"

export default defineConfig({
    plugins:[
        visualizer({
            emitFile:false,
            file:"states.html",
            open:true
        })
    ]

})

//vite.config.js
build:{
    rollupOptions:{
        output:{  //静态资源分类打包
            chunkFileNames: 'static/js/[name]-[hash].js',      
            entryFileNames: 'static/js/[name]-[hash].js',      
            assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
            
            manualChunks(id){ //静态资源拆分打包
                if (id.includes('node_modules')) {      
                    return id.toString().split('node_modules/')[1].split('/')[0].toString();           }
             }

        }
    
    }
}

//vite.config.js
import viteCompression from "vite-plugin-compression";

plugins:[
    viteCompression({
    verbose: true,    
    disable: false,
    threshold: 10240,  
    algorithm: 'gzip',
    ext: '.gz',
    })
]

yarn add unplugin-auto-import -D
yarn add unplugin-vue-components -D

//vite.config.js
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver,ElementPlusResolver} from 'unplugin-vue-components/resolvers'
 
export default defineConfig {
  plugins: [
    // ...
    AutoImport({
      resolvers: [AntDesignVueResolver(),ElementPlusResolver()],
    }),
    Components({
      resolvers: [AntDesignVueResolver(),ElementPlusResolver()],
    }),
  ],