大屏项目 vue3(三)

打包优化

在打包的时候 vite 告警：

打包告警

单个文件 1.4M 是非常大的，弱网环境下加载单个文件长达 5s,所以需要对 vite 配置进行修改,将第三方库单独打包

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          echarts: ["echarts"],
          vue: ["vue"],
          dataV: ["@kjgl77/datav-vue3"],
        },
      },
    },
  },
});

配置完成后重新打包，发现 echarts 的体积接近 1M，弱网环境下加载需要 4~5 秒,查询 echarts 文档发现可以按需引入

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须的接口
import * as echarts from "echarts/core";
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from "echarts/charts";
// 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
} from "echarts/components";
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from "echarts/features";
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
]);

按需引入后 echarts 打包体积减少到 600 多 k,gzip 后只有 200 多 k

压缩优化

安装依赖pnpm add vite-plugin-compression -D,同时 nginx 服务器也需要对应的配置

import viteCompression from "vite-plugin-compression";
export default {
  plugins: [
    vue(),
    viteCompression({
      deleteOriginFile: false,
      threshold: 10240, //体积大于10k才进行压缩
      algorithm: "gzip",
      ext: ".gz",
    }),
    viteCompression({
      deleteOriginFile: false,
      threshold: 10240, //体积大于10k才进行压缩
      algorithm: "brotliCompress",
      ext: ".br",
    }),
  ],
};

安装插件依赖pnpm add -D rollup-plugin-visualizer可以看哪个依赖体积比较大

大数据渲染场景优化

背景:在项目中，用户需要通过时间范围选择框，查询半年内的数据量，并用 ECharts 折线图一次性渲染 10 万条数据。

问题表现：接口请求返回大概有 10 万条数据，当时接口请求耗时大约 11s,数据包大小 3~4M 左右，图表渲染耗时 5s 多，渲染完成后交互卡顿感明显、延迟还特别严重。用户体验非常不好

方案 1:数据分段渲染

思路：一次性渲染全部数据开销过大，echarts 提供了dataZoom配置，可以再初始化时只渲染部分区间的数据，用户在交互的时候再逐步查看整体

json

{
  "dataZoom": [
    {
      "type": "slider",
      "xAxisIndex": [0],
      "start": 0, //初始窗口起点（百分比）
      "end": 1, //初始窗口终点（百分比）
      "minSpan": 0, //最小窗口范围（百分比）
      "maxSpan": 10 //最大窗口范围（百分比）
    }
  ]
}

具体操作上，用 start 和 end 控制图表初次渲染时滑块所处位置以及数据窗口范围，再使用 minSpan 和 maxSpan 控制每次查看最小范围和最大范围，最终限制图表的可视区显示范围

优缺点

优点：简单，不需要额外数据处理，显著缓解初次渲染卡顿问题
缺点：无法一次性概览全局，只能分段查看

方案 2：降采样策略

思路：折线图在「数据点数量远大于像素点」时，很多点其实是冗余的。ECharts 提供了 sampling 属性，支持不同降采样策略，以减少绘制点数量。

常见策略：

lttb：可以最大程度保留趋势、形状和极值其他的还有 min/max 等

优缺点

优点：配置简单但效果明显，能在大幅减少绘制点的同时保持曲线趋势
缺点：数据并非原始数据，极值可能会略有偏差

其他优化

接口

精简数据结构、减少无用字段
后端提前做降采样，减少返回数据量，去掉噪点或者无效信息

前端

数据处理放到 web worker，避免主线程阻塞

大屏项目 vue3(三) ​

打包优化 ​

压缩优化 ​

大数据渲染场景优化 ​

方案 1:数据分段渲染 ​

优缺点 ​

方案 2：降采样策略 ​