Vue打包优化-加快首屏加载速度

在打包前端项目时发现前端打包后的文件包体积过大，这大大影响了性能，优化方案有以下几种：

一、build视图分析依赖文件

        分析项目中的文件大小以及引用情况是优化前最重要的一步，这里提供一个小插件用于vite中：Rollup Plugin Visualizer，安装方式如下

npm install --save-dev rollup-plugin-visualizer

在vite.config.js中引入

import { visualizer } from "rollup-plugin-visualizer";

 plugins: [
    visualizer()
  ],

 打包完成后在文件夹中会生成一个stats.html文件，双击打开这个文件就是你的build视图了

二、第三方库CDN引入

我们在引入第三方插件的时候是直接import引入，就像这样

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import piniaPluginPersist from "pinia-plugin-persistedstate";
import { createPinia } from 'pinia'
import i18n from './lang/index'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

 这里就会造成我们打包时体积过大的问题，什么是CDN引入，通俗来讲就是把这些包通过script标签来引入到index.html中去，在需要调用对应的插件时直接通过对应插件的CDN地址下载之后使用，这样就减轻了我们服务器的负载，也压缩了打包体积。

这里还是提供一个插件：vite-plugin-cdn-import

安装：

npm install vite-plugin-cdn-import --save-dev

 基本用法：

// vite.config.js
import cdn from 'vite-plugin-cdn-import'

export default {
    plugins: [
        cdn({
            modules: [
                {
                    name: 'react',
                    var: 'React',
                    path: `umd/react.production.min.js`,
                },
                {
                    name: 'react-dom',
                    var: 'ReactDOM',
                    path: `umd/react-dom.production.min.js`,
                },
            ],
        }),
    ],
}

三、依赖文件分包

如果不配置构建工具的分包功能时，构建出来的build将无比巨大且是独立的一个js和css文件。vite底层已经集成了rollup的一部分功能，我们可以直接配置好。

四、gzip压缩文件

        Gzip是若干种文件压缩程序的简称，通常指GNU计划的实现，此处的gzip代表GNU zip。也经常用来表示gzip这种文件格式。

gzip不只是我们需要在打包的时候生成，也需要在web服务里开启功能，在vite下配置gzip

npm i vite-plugin-compression -D

在vite中使用vite-plugin-compression插件

import viteCompression from 'vite-plugin-compression'
export default defineConfig({
  plugins:[
    //在plugins配置数组里添加gzip插件
    viteCompression({
      verbose: true, // 默认即可
      disable: false, // 开启压缩(不禁用)，默认即可
      deleteOriginFile: false, // 删除源文件
      threshold: 5120, // 压缩前最小文件大小
      algorithm: 'gzip', // 压缩算法
      ext: '.gz' // 文件类型
    })
  ]
})