Vue 项目文件大小优化

优化逻辑

任何优化需求，都有一个前提，即可衡量。

那 Vue 加载速度的优化需求，本质上是要降低加载静态资源的大小。

所以，优化前，需要有一个了解项目现状的资源加载大小情况。

主要分 3 步走：

• 找到方法测量打包文件大小的方式。

• 完成打包文件大小的测量。

• 根据测量结果，对大文件进行针对性地优化处理。

思路捋顺后，核心就是要找到一个可测量的工具。

而要测量项目运行包的各个文件大小，关键在于要测量项目打包构建后的各个文件大小。

所以测量工具插件，和打包环境密切相关。

不同的环境下，有不同的测量工具。

以下罗列了当前 Vue3 项目下常用的打包环境及包大小测量和分析插件。

Vue3 + Vite 环境

安装插件

npm install vite-plugin-compression --save-dev

配置插件

在 vite.config.js 文件中添加 rollup-plugin-visualizer 插件的配置，如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { visualizer } from 'rollup-plugin-visualizer'  // 引入 visualizer 插件

export default defineConfig({
  plugins: [
    vue(),
    visualizer({
      open: true,  // 构建完