Vue3之Vite打包优化

一. rollup-plugin-visualizer(打包视图分析)

1. 安装： 

npm i rollup-plugin-visualizer -D

2. 配置：在vite.config.js中引入 rollup-plugin-visualizer 插件

import { visualizer } from 'rollup-plugin-visualizer';
export default defineConfig({
  plugins: [
  vue(), 
  visualizer({
    open: true, //在默认用户代理中打开生成的文件
    gzipSize: true, // 收集 gzip 大小并将其显示
    brotliSize: true, // 收集 brotli 大小并将其显示
    filename: "stats.html", // 分析图生成的文件名
  }),
})

3. 查看：包文件目录生成stats.html文件，打开stats.html文件，生成可视化代码分析报告。

二. 按需引入第三方库

对于一些较大的第三方库，如 Element UI或 Ant Design，可以考虑按需引入组件或样式，而不是全部引入。按需引入组件或样式可以参考这些第三方库的官方文档，在里面有介绍如何按需引入组件或样式。

(一) element-plus按需引入

1.  在main.ts去除element-plus引入

2. 安装插件：

npm i unplugin-vue-components -D
npm i unplugin-auto-import -D

3. vite.config配置

// 引入
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 配置
plugins: [