Vue3+Vite打包配置全過程(包括分包配置)

更新時(shí)間：2025年12月03日 10:56:42 作者：Z獸獸

文章主要介紹了在vite.config.ts文件中配置環(huán)境變量、代碼壓縮及分包策略的方法,通過配置output.manualChunks,項(xiàng)目打包后會(huì)將第三方包和業(yè)務(wù)代碼分開,更新業(yè)務(wù)代碼時(shí)只需更新index.js,從而利用緩存提升加載速度

1. 基本配置說明

import { defineConfig } from 'vite'
//配置組件路徑別名需引入resolve
import{ resolve } from 'path'
 
export default defineConfig({
  //配置根路徑，解決部署到服務(wù)器之后絕對(duì)路徑會(huì)報(bào)404問題，所以需改為相對(duì)路徑
  base:"./",

  server: {
    open: true,  //自動(dòng)打開瀏覽器
    proxy: {
      // 字符串簡(jiǎn)寫寫法，其他方法可看vite官網(wǎng)，使用方法與webpack解決跨域一樣
      '/foo': 'baseURL地址',
    }
  },

  // 路徑別名
  resolve: {
    dedupe: ['vue'],
	alias: [{
      find: '@',
	  replacement: resolve(__dirname, 'source')
	}]
  },

  // 生產(chǎn)環(huán)境移除console.log的配置
  build:{
    // 默認(rèn)是esbuild,但這里需要改成terser，并且想使用terser的話，需提前安裝，命令為npm add -D terser                     
    minify:"terser",
    outDir: "dist",
    terserOptions: {
      compress: {
        //生產(chǎn)環(huán)境時(shí)移除console
        drop_console: true,
        drop_debugger: true,
      },
      format: {
		comments: false,      // 刪除注釋
	  }
    },
  },
  plugins: [],
})

2. 代碼壓縮

//下載包
npm i vite-plugin-compression -D

//在vite.config.ts中
import viteCompression from 'vite-plugin-compression'


//在plugins中配置即可
plugins: [
  viteCompression({ verbose: true, disable: false, threshold: 10240, algorithm: 'gzip', ext: '.gz' }), 
]

3. 分包策略使用output.manualChunks

build: {
	rollupOptions: {
		output: {
            //1) 使用函數(shù)方式
			manualChunks: (id:any) => {
				if (id.includes('node_modules')) {
					if (id.includes('element-plus')) return 'element-plus';
					else if (id.includes('lodash')) return 'lodash';
				}
			},
            //2) 使用鍵值對(duì)的方式
            manualChunks: {
                'element': ['element-plus']
            }

            //打包后的文件命名格式
			entryFileNames: `js/[name].[hash].js`,
			chunkFileNames: `js/[name].[hash].js`,
			assetFileNames: `static/[ext]/[hash].[ext]`
		}
	}
},

以下是我自己的項(xiàng)目打包后的dist包詳情，引入的第三方包都各自拆分為包，業(yè)務(wù)代碼在index.js中。

這樣以后再有業(yè)務(wù)更新時(shí) 只需要更新index，不需要更新第三方包，可以讀取緩存，提升加載速度