性能调优← 返回文章列表

协作平台构建体积优化：ECharts 按需引入与构建分包

记录中后台平台打包体积治理过程：通过 ECharts 按需注册模块、构建期图片压缩与 Vite manualChunks 拆包策略，缩减首屏传输体积。

· 8 分钟

AI 摘要展开

协作平台的包体积优化先用构建报告定位大依赖，再按需注册 ECharts、压缩静态图片，并调整 Vite 分包。文章记录了修改前后的体积和加载表现。拆包需要围绕变动频率与缓存边界组织，文件过多反而会增加请求成本，不能把分包数量当成收益。

本页目录展开 / 收起

读完你能做什么

  • 从构建报告中找出大依赖、重复模块和不合理分包。
  • 对 ECharts 与静态图片分别采用按需注册和合适的资源格式。
  • 用首屏请求与缓存命中验证拆包是否真正改善加载。

不要先改 manualChunks。先记录入口包、异步包和资源体积，再判断问题属于“引入过多”“压缩不足”还是“缓存边界不稳定”。拆成更多文件不一定更快，它也会增加请求与调度成本。

在敏捷协作平台开发初期，随着燃尽图、工时分布等图表以及富文本编辑器和数据导出模块的陆续接入，生产构建产物（Bundle）体积不断增长。

初次访问时需要下载的静态资源增多，弱网环境下白屏时间明显拉长。本文记录具体的排查方式与逐步瘦身的过程。

体积瓶颈分析

通过 rollup-plugin-visualizer 开启产物分析矩阵，发现主要体积由三大块构成：

TEXT
产物组成:
┌───────────────────────────────────────────────────────────┐
│ 1. ECharts 全量功能包 ──► 包含未使用的图表                  │
│ 2. 静态 UI 演示图与高清 PNG ──► 未做压缩                    │
│ 3. 单一大文件 Vendor Bundle ──► 缓存边界不稳定              │
└───────────────────────────────────────────────────────────┘

ECharts 按需引入与模块注册

习惯直接写 import * as echarts from 'echarts' 会把 3D 图表、GL 渲染器、树图等所有无关模块全部打包进产物。

改造为按需注册核心模块：

TS
// lib/echarts.ts
import * as echarts from 'echarts/core';
import { BarChart, LineChart, PieChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
 
// 仅注册本项目实际用到的图表类型与通用组件
echarts.use([
  BarChart,
  LineChart,
  PieChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  CanvasRenderer,
]);
 
export default echarts;

静态资源构建期压缩

在构建流水线中引入 vite-plugin-image-optimizer：

TS
// vite.config.ts
import { defineConfig } from 'vite';
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
 
export default defineConfig({
  plugins: [
    ViteImageOptimizer({
      png: { quality: 80 },
      jpeg: { quality: 80 },
      webp: { quality: 85 },
      svg: {
        plugins: [
          { name: 'removeViewBox', active: false },
          { name: 'sortAttrs', active: true },
        ],
      },
    }),
  ],
});

Vite 分包策略（manualChunks）

TS
// vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'react-vendor': ['react', 'react-dom'],
          'echarts-vendor': ['echarts/core', 'echarts/charts', 'echarts/components'],
          'mobx-vendor': ['mobx', 'mobx-react-lite'],
          'query-vendor': ['@tanstack/react-query'],
        },
      },
    },
    chunkSizeWarningLimit: 600,
  },
});

官方资料

工程经验小结

分包并非拆得越细越好。过细的 manualChunks 会导致浏览器发起过多的并发 HTTP 请求，反而可能在 HTTP/1.1 或弱网高延迟环境下恶化加载瀑布流。

拆包的核心在于区分变动频率低的基础运行时（如 react、mobx）与高频迭代的业务逻辑，让长期缓存真正发挥作用。同时，静态图片在进入仓库前最好有统一的尺寸和格式规范，单纯依赖构建期插件压缩仍可能掩盖非必要的超大原图引入问题。

继续阅读

评论