优化前预览
目前无任何处理，打包文件大小约为4M
一、先安装rollup-plugin-visualizer
在项目根目录安装rollup-plugin-visualizer，此插件能图形化文件大小，方便观察
npm i -D rollup-plugin-visualizer
安装完在vite.config.ts中进行配置
import { visualizer } from 'rollup-plugin-visualizer'
// defineConfig配置项
plugins: [
visualizer({
emitFile: false,
filename: 'stats.html',
open: true,
sourcemap: true
})
]
保存配置后打包一次就能看见文件夹大小分布
二、解决大文件
一眼看去发现 china.json占比最大，先解决它。
看代码发现开发时是静态文件引入，修改为接口获取
修改为 ↓
改好后重新打包，一下子就小了不少
三、CDN引入第三方库
之前发现除了最大的静态JSON文件，第三方库占用空间也是非常大，所以下一步就是解决它。
在此之前需要安装 vite-plugin-cdn-import ，此插件可以帮我们使用CDN方式引入第三方库，减小请求压力，同时也缩小项目体积
npm i -D vite-plugin-cdn-import
安装好后再vite.config.ts文件中进行配置
import { autoComplete, Plugin as importToCDN } from "vite-plugin-cdn-import"
//放在 plugin 下
importToCDN({
modules: [
{
name: "element-plus",
var: "ElementPlus",
path: "https://unpkg.com/element-plus@2.4.2",
css: "https://unpkg.com/element-plus/dist/index.css"
},
autoComplete('axios'),
autoComplete('vue'),
autoComplete('moment'),
autoComplete('lodash'),
// {
// name: "vue",
// var: "Vue",
// path: "https://unpkg.com/vue@3.3.8"
// },
// {
// name: "moment",
// var: "Moment",
// path: "https://unpkg.com/moment@2.29.4"
// },
// {
// name: "lodash",
// var: "Lodash",
// path: "https://unpkg.com/lodash@4.17.21"
// },
],
}),
此处使用 autoComplete 可以自动帮助引入，目前只支持部分库，具体可以查看 vite-plugin-cdn-import配置文档， 其他函数不支持的需要自行配置path，推荐去 www.jsdelivr.com查找
举个栗子，假设我需要引入Element-plus，那么我可以搜索element-plus
点击进入
这里就有.js 以及配套的.css文件，将链接填入配置保存即可。
如果有版本需求 ，可以用unpkg.com/:package@:version/:file 方式引入，例如https://unpkg.com/vue@3.3.8
保存后再次打包
可以看到比上次小了近1M！
四、依赖分包
虽然咱们项目体积已经缩小了很多，但是可以从刚才打包后的文件里看出，存在个别文件相比其他的要大得多，这会导致依赖模块加载时变慢，所以我们下一步就是要将大包分开。
我们可以先去vite官网找到构建选项中的 build.rollupOptions ，vite其实是基于rollup为底层开发的，这里的配置更是可以直接参照rollup配置，这里我们配置部分选项,在vite.config.ts文件中添加以下配置项
// defineConfig 下
build: {
rollupOptions: {
output: {
sourcemap: true,
chunkFileNames: 'static/js/[name]-[hash].js',
entryFileNames: 'static/js/[name]-[hash].js',
assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
manualChunks(id){
// id为文件的绝对路径
if(id.includes('node_modules')){
return id.toString().split('node_modules/')[1].split('/')[0].toString()
}
}
}
}
}
保存后再次打包后可以看到之前的大文件已经被拆分开
五、gzip压缩
最后就是代码压缩了，依旧是安装插件vite-plugin-compression
npm i -D vite-plugin-compression
安装完再进行配置
import viteCompression from 'vite-plugin-compression'
plugin:[
viteCompression({
verbose: true,
disable: false,
threshold: 1024,
algorithm: 'gzip',
deleteOriginFile: true
})
]
保存再次打包，看看效果咋样
这里好像没有啥效果，可能是因为之前的代码已经被压缩了，具体效果可能会有不同。
总结
这几套组合拳打过去，项目体积不小也难，配置过程需要注意配置项位置，有时候配置好了没有效果可以去插件文档里检查下是否放错了位置。
============================================================================
这里贴一下配置代码以及最后结果
import { UserConfigExport, ConfigEnv, loadEnv } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import DefineOptions from 'unplugin-vue-define-options/vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
import { visualizer } from 'rollup-plugin-visualizer'
import { autoComplete, Plugin as importToCDN } from "vite-plugin-cdn-import"
import viteCompression from 'vite-plugin-compression'
export default ({ command, mode }: ConfigEnv): UserConfigExport => {
let env = loadEnv(mode, process.cwd())
return {
plugins: [
vue(),
createSvgIconsPlugin({
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
symbolId: 'icon-[dir]-[name]',
}),
VueSetupExtend(),
DefineOptions(),
viteMockServe({
mockPath: 'mock',
localEnabled: command === 'serve',
}),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
visualizer({
emitFile: false,
filename: 'stats.html',
open: true,
sourcemap: true
}),
importToCDN({
modules: [
autoComplete('axios'),
autoComplete('vue'),
autoComplete('moment'),
autoComplete('lodash'),
{
name: "element-plus",
var: "ElementPlus",
path: "https://unpkg.com/element-plus@2.4.2",
css: "https://unpkg.com/element-plus/dist/index.css"
},
{
name: 'pinia',
var: 'pinia',
path: "https://unpkg.com/pinia@2.1.7"
},
{
name: "echarts",
var: "echarts",
path: "https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"
},
{
name: "vue-router",
var: "vue-router",
path: "https://cdn.jsdelivr.net/npm/vue-router@4.2.5/dist/vue-router.global.min.js"
},
{
name: "echarts-liquidfill",
var: "echarts-liquidfill",
path: "https://cdn.jsdelivr.net/npm/echarts-liquidfill@3.1.0/dist/echarts-liquidfill.min.js"
},
],
}),
viteCompression({
verbose: true,
disable: false,
threshold: 1024,
algorithm: 'gzip',
deleteOriginFile: true
})
],
resolve: {
alias: {
'@': path.resolve('./src'), // 相对路径别名
},
},
css: {
preprocessorOptions: {
scss: {
javascriptEnabled: true,
additionalData: '@import "./src/style/variable.scss";',
},
},
},
server: {
proxy: {
[env.VITE_APP_BASE_API]: {
target: env.VITE_SERVE,
// 需要代理跨域
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
},
build: {
rollupOptions: {
output: {
// sourcemap: true,
chunkFileNames: 'static/js/[name]-[hash].js',
entryFileNames: 'static/js/[name]-[hash].js',
assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
manualChunks(id){
// id为文件的绝对路径
if(id.includes('node_modules')){
return id.toString().split('node_modules/')[1].split('/')[0].toString()
}
}
}
}
}
}
}
