Vue3 + Vite 的项目优化的一段旅程

晓欲望
409 阅读3分钟

“携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情”

前言

这段时间开发了一个数据可视化大屏项目，开发前在网上找了个 Vue3 + vite的项目框架，然后在这个基础上加入了自己前端项目代码规范。项目规范(husky+prettier+eslint+commitlint)

当时没有在 vite.config.ts 进行查看，导致有些配置导致后面开始上线测试就发生了加载速度过慢。

sourcemap 未关闭

sourcemap 开启会在 dist包下面产生一个 .map 是保存源代码映射关系的文件。 什么是 SourceMap？

image.png

当时看到接口都在排队很是疑惑。 image.png

因为测试环境使用的 http1.1, google 浏览器是可以建立6条 tcp的连接。

image.png

从图上可以看到通道都没有连续性，谷歌开发工具看不到后台在默默的加载 .map 文件。 当然这里我还是没有意识到这个等待是 sourcemap 未关闭导致的，后面打开 dist 包看到 map没有关闭就随手关了，发现就好了。

image.png

后面思考原因: 使用了 Fidder 抓包软件就发现了 .map文件。 image.png

Vite 默认是把 false(关闭) 的，只是我下载项目配置开启了。 build.sourcemap

rollup-plugin-visualizer

image.png

因为 vite 的打包是使用了 rollup 进行打包的，所以使用 rollup 的插件进行 dist 包的分析。

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

或者

yarn add --dev rollup-plugin-visualizer

rollup-plugin-visualizer 提供了 cjs 和 es 两种引入方式，我使用的是 Vite 肯定是使用 es 的方式。

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

module.exports = {
  plugins: [visualizer()],
};

打包完成后会在根目录下看到 stats.html, 当然也可以进行配置 打包完成自动打开 stats.html 文件。

module.exports = {
  plugins: [visualizer(open: true})],
};

更多配置: rollup-plugin-visualizer

Echarts 和 Element Plus 按需引入

项目中有使用到几个 Element Plus 的组件，它的按需加载详情可以看官网这里就不说了。 element plus 按需加载

因为项目的 Echarts 也只使用到一部分组件，开发过程中是全部加载了进来。

image.png

然后使用 Echart 的按需加载。 Echarts 官网

image.png

官网例子中就有，当不知道项目中引进哪些组件，Echarts 报错就会告诉你。

image.png

然后根据这些报错 一一添加这些组件。最后 Echarts 的包小了 1MB 左右。

image.png

开启 gzip

vite-plugin-compression

yarn add vite-plugin-compression -D

or

npm i vite-plugin-compression -D

使用:

import viteCompression from 'vite-plugin-compression';

export default () => {
  return {
    plugins: [viteCompression()],
  };
};

打包就可以看到产生了 .gz 文件。

image.png

当然这个配置完还是没有开启的，需要在 nginx 服务器的 server 中加上以下内容。

 gzip on;
 gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/bmp application/x-bmp image/x-ms-bmp application/vnd.ms-fontobject font/ttf font/opentype font/x-woff;

配置好后重启服务器(我很经常忘记): sudo nginx -s reload

开启后就可以看到

image.png

router 跳转取消上个页面未响应接口

项目中有几个接口请求速度偏慢，客户可能不等待就返回，这时候需要把这些未响应的接口给终止掉。

cancelReq.gif

我下面使用 pinia 进行全局数据的管理

cancelRequest 文件

import { defineStore } from 'pinia'

export const useCancelRequestStore = defineStore({
  id: 'cancelRequest',
  state: () => {
    return {
      cancelRequestList: [] as any[]
    }
  },
  actions: {
    // 添加取消的接口
    setCancelRequestList(cancel: any) {
      this.cancelRequestList.push(cancel)
    },
    handlerCance() {
      // 循环执行取消的接口
      this.cancelRequestList.forEach(cancel => {
        cancel('路由跳转 Cancel')
      })
      // 重置
      this.cancelRequestList = []
    }
  }
})

service.interceptors.request.use 添加下面请求取消的代码

const reqCancel = useCancelRequestStore()
service.interceptors.request.use(
  (config: AxiosRequestConfig) => {
      config.cancelToken = new axios.CancelToken(function (cancel) {
      reqCancel.setCancelRequestList(cancel)
    })
    return config
  })

监听 router 的跳转

const reqCancel = useCancelRequestStore()
router.beforeEach(function (to, from, next) {
  reqCancel.handlerCance() // 取消请求
  next()
})

最后

做完以上这些操作，项目的运行速度有了显著的提升。

avatar
文章
阅读
粉丝