Vue3+Vite打包配置全过程(包括分包配置)
作者：Z兽兽
文章主要介绍了在vite.config.ts文件中配置环境变量、代码压缩及分包策略的方法,通过配置output.manualChunks,项目打包后会将第三方包和业务代码分开,更新业务代码时只需更新index.js,从而利用缓存提升加载速度
vite.config.ts文件中配置环境变量
1. 基本配置说明
import { defineConfig } from 'vite'
//配置组件路径别名需引入resolve
import{ resolve } from 'path'
export default defineConfig({
//配置根路径，解决部署到服务器之后绝对路径会报404问题，所以需改为相对路径
base:"./",
server: {
open: true, //自动打开浏览器
proxy: {
// 字符串简写写法，其他方法可看vite官网，使用方法与webpack解决跨域一样
'/foo': 'baseURL地址',
}
},
// 路径别名
resolve: {
dedupe: ['vue'],
alias: [{
find: '@',
replacement: resolve(__dirname, 'source')
}]
},
// 生产环境移除console.log的配置
build:{
// 默认是esbuild,但这里需要改成terser，并且想使用terser的话，需提前安装，命令为npm add -D terser
minify:"terser",
outDir: "dist",
terserOptions: {
compress: {
//生产环境时移除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) 使用函数方式
manualChunks: (id:any) => {
if (id.includes('node_modules')) {
if (id.includes('element-plus')) return 'element-plus';
else if (id.includes('lodash')) return 'lodash';
}
},
//2) 使用键值对的方式
manualChunks: {
'element': ['element-plus']
}
//打包后的文件命名格式
entryFileNames: `js/[name].[hash].js`,
chunkFileNames: `js/[name].[hash].js`,
assetFileNames: `static/[ext]/[hash].[ext]`
}
}
},以下是我自己的项目打包后的dist包详情，引入的第三方包都各自拆分为包，业务代码在index.js中。
这样以后再有业务更新时 只需要更新index，不需要更新第三方包，可以读取缓存，提升加载速度
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。