Vue3之vite打包优化

一：部分组件异步加载

按照vue官方文档的介绍，对于某些优先级比较低的组件可以使用异步加载的方式进行引入

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

二：视图分析优化打包资源

1，下载插件

yarn add --dev rollup-plugin-visualizer

2，配置插件

//vite.config.js
 
import {visualizer} from "rollup-plugin-visualizer"
 
export default defineConfig({
    plugins:[
        visualizer({
            emitFile:false,
            file:"states.html",
            open:true
        })
    ]
 
})

3，执行打包命令，分析生成的视图分析页面

三，更改vite配置文件进行打包优化

1，依赖分包

        

//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();           }
             }
 
        }
    
    }
}

2，开启Gzip

它的主要作用就是缩小打包体积

安装插件   yarn add vite-plugin-compression -D

参数：

• filter:过滤器，对哪些类型的文件进行压缩, 默认为 /.(js|mjs|json|css|html)$/i

• verbose:true; 是否在控制台输出压缩结果，默认为true

• threshold: 启用压缩的文件大小限制，单位是字节，默认为0

• disable:false; 是否禁用压缩，默认为false

• deleteOriginFile: 压缩后是否删除原文件，默认为false

• algorithm: 采用的压缩算法,默认是gzip

• ext：生成的压缩包后缀

//vite.config.js
import viteCompression from "vite-plugin-compression";
 
plugins:[
    viteCompression({
    verbose: true,    
    disable: false,
    threshold: 10240,  
    algorithm: 'gzip',
    ext: '.gz',
    })
]

3，第三方组件库按需加载

安装插件 unplugin-vue-components 和 unplugin-auto-import

yarn add unplugin-auto-import -D

yarn add unplugin-vue-components -D

其中 unplugin-vue-components 主要配置第三方组件按需加载

unplugin-auto-import 主要配置第三方aip 自动导入

简单配置第三方组件按需导入

//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()],
    }),
  ],