vue3项目页面首次加载慢优化

1、路由、组件懒加载

// 路由懒加载

{    path: "/XXX/XXXX",    name: "XXX",    component: () => import("@/views/XXX/XXXX/index.vue"), // 此处使用了promise来实现路由懒加载    meta: {        title: "XXXX"    }}

// 组件懒加载
使用defineAsyncComponent来显示声明异步组件

import { defineAsyncComponent } from 'vue'const xxxx = defineAsyncComponent(() => import('@/components/xxx.vue'))

2、gzip

vuecli脚手架 配置gzip

1、下载插件

npm i -D compression-webpack-plugin

2、在vue.config.js中导入插件，并且使用

const CompressionPlugin = require("compression-webpack-plugin") //引入gzip压缩插件

module.exports = defineConfig({  configureWebpack: {    plugins: [      new CompressionPlugin({        //gzip压缩配置        test: /\.js$|\.html$|\.css/, //匹配文件名        threshold: 10240, //对超过10kb的数据进行压缩        deleteOriginalAssets: false, //是否删除原文件      }),    ],  },})

3、在nginx里配置gzip，不然不能解压

在需要的代理server里配置

#开启gzipgzip  on;  #低于1kb的资源不压缩 gzip_min_length 1k;#压缩级别1-9，越大压缩率越高，同时消耗cpu资源也越多，建议设置在5左右。gzip_comp_level 5; #需要压缩哪些响应类型的资源，多个空格隔开。不建议压缩图片.gzip_types text/plain application/javascript application/x-javascript text/javascript             text/xml text/css;  #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）gzip_disable "MSIE [1-6]\.";  #是否添加“Vary: Accept-Encoding”响应头gzip_vary on;

配置成功后，浏览器中查看请求，响应标头。若是存在 Accept-Encoding: gzip; 就表示成功了。

vite脚手架配置gzip

1、下载插件

pnpm i vite-plugin-compression -D

复制代码

2、使用

// 在vite.config.ts里配置
plugins: [    viteCompression()],// 插件github地址 https://github.com/vbenjs/vite-plugin-compression

3、这一步和vuecli脚手架第三步一样

总结：

使用了gzip压缩以后，首次加载的时间就很短了，当然还有其他优化的方法需要去尝试，比如服务端渲染、预渲染、使用在线cdn等。