首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3之vite打包优化

Vue3之vite打包优化方式

2025-04-25 08:49:19 作者：梦凡尘

这篇文章主要介绍了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()],
    }),
  ],

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。