vite3+vue3 项目打包优化

现在很多小伙伴都已经使用 Vite + Vue3 开发项目了，如果你是 “前端架构师” 或者是 “团队核心” 的话，不得不可考虑的一个问题就是性能优化。

说到前端性能优化，个人认为主要有两个方面：

1. 减少文件的体积，体积小了加载自然就快了。如：首屏优化、CDN加速、UI组件库按需加载 等等
2. 代码层面的优化。如：组件、样式的抽取，路由懒加载、Vue3性能优化、代码层面优化 等等

本篇文章主要讲述的是生产环境下 Vite + Vue3 打包优化。

数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
Vue权限系统案例
个人博客

1. 依赖视图分析（rollup-plugin-visualizer）

优化的主要难点在于从哪里开始去优化。如果不清楚自己的项目问题出现在哪里，就显得比较盲目。我们可以通过插件工具rollup-plugin-visualizer先分析一下项目的文件大小及引用情况，根据分析结果采取对应的文件分包、cdn引入等相关技术有针对性的去优化。

Rollup Plugin Visualizer 是一个依赖分析插件，它提供了多种模式的依赖分析，包括直观的视图分析，sunburst（循环层次图，像光谱）、treemap（矩形层次图，看起来比较直观，也是默认参数）、network（网格图，查看包含关系）、raw-data（原数据模式，json格式）, list(列表模式)，你可以选择任意一种你喜欢的观察模式。本文采用默认的方式进行依赖分析。

安装

# npm 方式
npm install --save-dev rollup-plugin-visualizer

# yarn 方式
yarn add rollup-plugin-visualizer --dev

vite.config.ts 配置

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue