欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3之vite打包優(yōu)化方式

 更新時(shí)間：2025年04月25日 08:49:19   作者：夢(mèng)凡塵  
這篇文章主要介紹了Vue3之vite打包優(yōu)化方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

一、部分組件異步加載

按照vue官方文檔的介紹，對(duì)于某些優(yōu)先級(jí)比較低的組件可以使用異步加載的方式進(jìn)行引入

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

二、視圖分析優(yōu)化打包資源

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，執(zhí)行打包命令，分析生成的視圖分析頁面

三、更改vite配置文件進(jìn)行打包優(yōu)化

1，依賴分包

//vite.config.js
build:{
    rollupOptions:{
        output:{  //靜態(tài)資源分類打包
            chunkFileNames: 'static/js/[name]-[hash].js',      
            entryFileNames: 'static/js/[name]-[hash].js',      
            assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
            
            manualChunks(id){ //靜態(tài)資源拆分打包
                if (id.includes('node_modules')) {      
                    return id.toString().split('node_modules/')[1].split('/')[0].toString();           }
             }

        }
    
    }
}

2，開啟Gzip

它的主要作用就是縮小打包體積

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

參數(shù)：

  • filter：過濾器，對(duì)哪些類型的文件進(jìn)行壓縮, 默認(rèn)為 /.(js|mjs|json|css|html)$/i
  • verbose：true; 是否在控制臺(tái)輸出壓縮結(jié)果，默認(rèn)為true
  • threshold: 啟用壓縮的文件大小限制，單位是字節(jié)，默認(rèn)為0
  • disable:false; 是否禁用壓縮，默認(rèn)為false
  • deleteOriginFile: 壓縮后是否刪除原文件，默認(rèn)為false
  • algorithm: 采用的壓縮算法,默認(rèn)是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 自動(dòng)導(dǎo)入

簡(jiǎn)單配置第三方組件按需導(dǎo)入

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

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論