G2 5.0 支持按需打包，3D 和智能可视化还会远吗？

avatar

G2 5.0.19 版本推出了按需打包的功能。可以借助 Rollup, Webpack 等打包工具 Tree-Shaking 的能力去按需使用 G2 的特性，从而减少打包后的体积。虽然从结果上看还有不少优化空间，该功能的推出有以下几个意义：

  • 防止已有 G2 5.0 用户的包体积无意义的增加。
  • 能更清晰地分析依赖和整理 G2 5.0 的总体架构。
  • 提供一种对 G2 5.0 能力扩展的思路。

开始使用

比如打包如下的一个网页，该网页使用 G2 绘制了一个条形图：

<html>
  <div id="container"></div>
  <script type="module">
    import { corelib, extend, Runtime } from '@antv/g2';

    // 根据 Runtime 扩展 corelib 的能力
    const Chart = extend(Runtime, corelib());

    // 初始化扩展后的图表实例
    const chart = new Chart({
      container: 'container',
      theme: 'classic',
    });

    // 声明可视化
    chart.options({
      type: 'interval',
      data: [
        { genre: 'Sports', sold: 275 },
        { genre: 'Strategy', sold: 115 },
        { genre: 'Action', sold: 120 },
        { genre: 'Shooter', sold: 350 },
        { genre: 'Other', sold: 150 },
      ],
      encode: {
        x: 'genre',
        y: 'sold',
      },
    });

    // 渲染可视化
    chart.render();
  </script>
</html>

和直接使用 import { Chart } from '@antv/g2' 暴露出的 Chart 对象的打包体积相比如下：

image.png

可以发现体积减少了 100kb 左右。

原理

G2 的架构是由 Runtime + library 构成的。Runtime 负责渲染流程，library 是一个有一系列可视化组件构成的 JavaScript Object，用于在整个渲染的不同阶段处理或者绘制数据。

const library = {
  'mark.interval': Interval,
  'mark.forceGraph': ForceGraph,
  'mark.geoPath': GeoPath,
  'scale.linear': Linear,
  'scale.log': Log,
  //...
};

所以打包后 G2 的大小由 Runtime 的大小和 library 共同决定。Runtime 的大小是固定的，但是 library 的大小是可以变化的：如果我的项目中只用到了统计图表，就不会依赖地理或者图分析相关的能力，这部分能力对应的可视化组件就不用包含在使用的 library 里面。

基于上面的理论，我们可以通过控制 library 包含的可视化组件来控制最后的包体积。

使用指南

下面简单介绍一下和按需打包相关的 API。

G2.Runtime(options)

返回一个 G2 运行时。该运行时不包含任何 Library，需要配合 G2.extend 一起使用。

可以单独使用一个 library，比如只使用核心的能力：

import { Runtime, extend, corelib } from '@antv/g2';

const Chart = extend(Runtime, corelib());

也可以同时使用多个 library，比如使用核心和地理能力：

import { Runtime, extend, corelib, geolib } from '@antv/g2';

const Chart = extend(Runtime, {
  ...corelib(),
  ...geolib(),
});

G2.extend(Runtime, library)

根据指定的 library 对 Runtime 进行增强，包括增加类型和对应的 Chart API。

import { Runtime, extend, corelib } from '@antv/g2';

const Chart = extend(Runtime, corelib());

G2.stdlib()

返回标准库，包含 G2 所有的能力，也就是包含 G2.corelib，G2.plotlib，G2.geolib 以及 G2.graphlib 的所有可视化组件。G2.Chart 就是使用了这个 library。(源码 · 案例)

import { Runtime, extend, stdlib } from '@antv/g2';

const Chart = extend(Runtime, stdlib());

const chart = new Chart({ theme: 'classic' });

chart.interval(); // corelib
chart.sankey(); // plotlib
chart.geoPath(); // graphlib
chart.forceGraph(); // graphlib

G2.corelib()

返回核心库，只包含基础的 Mark。可以通过源码看包含的可视化组件。(源码 · 案例)

import { Runtime, extend, corelib } from '@antv/g2';

const Chart = extend(Runtime, corelib());

G2.plotlib()

返回高级统计分析库，包含一些复杂的统计标记（Snakey 等）和转换（Venn 等）。不能单独使用，需要配合 G2.corelib 使用。可以通过源码看包含的可视化组件。(源码 · 案例)

import { Runtime, extend, corelib, plotlib } from '@antv/g2';

const Chart = extend(Runtime, {
  ...corelib(),
  ...plotlib(),
});

const chart = new Chart({ theme: 'classic' });

chart.sankey();

G2.geolib()

返回地理分析库，包含地理标记（GeoPath 等）和投影（Projection）。不能单独使用，需要配合 G2.corelib 使用。可以通过源码看包含的可视化组件。(源码 · 案例)

import { Runtime, extend, corelib, geolib } from '@antv/g2';

const Chart = extend(Runtime, {
  ...corelib(),
  ...geolib(),
});

const chart = new Chart({ theme: 'classic' });

chart.geoPath();

G2.graphlib()

返回图分析库，包含图标记（ForceGraph 等）。不能单独使用，需要配合 G2.corelib 使用。可以通过源码看包含的可视化组件。(源码 · 案例)

import { Runtime, extend, corelib, graphlib } from '@antv/g2';

const Chart = extend(Runtime, {
  ...corelib(),
  ...graphlib(),
});

const chart = new Chart({ theme: 'classic' });

chart.forceGraph();

未来工作

目前是推出了按需打包的能力，但是可以发现效果不是很明显，只减少了 10% 左右的大小。通过分析如下 G2 5.0.18 使用 G2.stdlib 依赖图可以有以下几个可以进一步优化思路：

  • 减少 Runtime 的体积：把一些能力放在 library 里面可以按需使用。
  • 依赖治理：去掉一些重复依赖，比如 @antv/util；减少一些依赖的大小 @antv/gui。
  • 提供比 corelib 更小的 library：可以实现 Mark 级别的按需打包。
dep

针对第三个方法目前的思路是：提供 G2.litelib，可以按需引入 Mark。

import { Runtime, extend, litelib, Interval } from '@antv/g2';

const Chart = extend(Runtime, {
  ...litelib,
  'mark.interval': Interval,
});

const chart = new Chart({ theme: 'classic' });

chart.interval();

期望中的 litelib 只包含绘制一个可视化所需要的基本组件，其余所有的组件都需要通过 import 的形式按需使用，比如使用 tooltip 交互：

import { Runtime, extend, litelib, Interval, Tooltip } from '@antv/g2';

const Chart = extend(Runtime, {
  ...litelib,
  'mark.interval': Interval,
  'interaction.tooltip': Tooltip,
});

const chart = new Chart({ theme: 'classic' });

chart.options({
  type: 'interval',
  interaction: { tooltip: true }, // 使用 tooltip 交互
});

如果大家对相关的东西感兴趣，或者对优化 G2 5.0 的包大小有想法，可以提供相关的想法或者在 G2 5.0 treeshaking 的测试环境把玩把玩！

彩蛋

G2 5.0 即将支持增强分析和 3D 可视化！

G2.autolib()

开发中，预计 10 月底上线

返回增强分析库，提供增强分析标记（Auto 等）。该 library 会依赖 @antv/ava ，提供自动绘制图表、自动标注等能力。不能单独使用，需要配合 G2.corelib 使用。

import { Runtime, extend, corelib, autolib } from '@antv/g2';

const Chart = extend(Runtime, {
  ...corelib(),
  ...autolib(),
});

const chart = new Chart({ theme: 'classic' });

chart.auto(); // Auto Mark

G2.threedlib()

开发中，预计 10 月底上线

返回 3D 分析库，提供 3D 可视化的能力。该 library 不会包含在 G2.stdlib 里面，同样不能单独使用，需要配合 G2.corelib 使用。

import { Runtime, extend, threedlib, corelib } from '@antv/g2';
import { Renderer } from '@antv/g-webgl';

const Chart = extend(Runtime, {
  ...corelib(),
  ...threedlib(),
});

const chart = new Chart({
  theme: 'classic',
  renderer: new Renderer(), //使用 webgl 渲染器
});

chart.interval3d();
avatar
文章
阅读
粉丝