G6 Mobile 包体积优化

g6-mobile 初始版本打包之后发现体积很大,parse 之后 1.3 M,gzip 之后 330k,这个尺寸移动端难以接受。 具体打包状况如下: image.png 几个比较大的部分:

  • 480k node_modules, 包括重复的 g-base 80k,regl 100k,重复的 gl-matrix、inversify 和 hierarchy 等。
  • 590k 的 g6-mobile,g6-core 及其依赖。
  • 210k 的本地 g-mobile 和 g-base。
  • 30k 的 g6-core 中的重复依赖 gl-matrix 和 algorithm。

可以看出有一下几点问题:

问题

g-base 有重复版本

当前 g6-mobile 依赖的 g-mobile 还在开发中,没有发包安装,所以通过本地 link 的方式引入,g-mobile 依赖了同样是本地 link 的 g-base。而 g6-mobile 本身 也会直接引用 g-base,间接通过依赖 g-core 而引用 g-base,所以打包中包含重复的 g-base,大概有 80k 大小。 image.png 这种情况在正式发包的时候不会出现。手动把 g-base 全部指向 本地之后,不再有重复的 g-base,总包大小来到 1.22 M。 image.png 同时也看到 g-base 总共只有 120k 左右,即使立即改造 g-base ,把 document svg 相关内容剥离优化,带来的收益也很有限: image.png 同样的重复问题还有 @antv/util,g-mobile 发包之后正常引入应该就不会有问题,会释放 20k。

image.png

g6-mobile、g6-core 中的无用模块

image.png

  • 遵循不改动 g6-core 的原则,不到 200k 的g6-core 需要全部保留,没有优化空间, 不到 50k 的 g6-mobile  源码全部保留,没有优化空间。

  • 重点是加在一起超过 300k 的、 @antv/g-webgpu 及其引入的  @antv/g-webgpu-core、 @antv/g-webgpu-engine 相关依赖。这部分移动段不需要,溯源查了下,发现均是通过   @antv/layout 内置布局引入的。这部分需要优化,具体方法是把 layout 跟 g6-mobile 主包拆开,不提供内置布局,或只提供最简单的一种内置布局,把布局作为拓展包,用户按需引入。

这样可以把这里优化出大约 350k 的空间。

  • 另外有重复的 gl-matrix,子包中 gl-matrix 跟 主包中的版本不一致,看起来也可以优化,大概有 60k 的 优化空间。

image.png image.png image.png g6-core node_modules 中的 重复依赖 gl-matrix 和 algorithm,跟 g6-mobile node modules 重复,跟其他包间接引入的 gl-matrix 版本不一致(原因是 g-mobile 中引入了 3.0 版本 的 g-math, @antv/matrix-util,g6-core 和 g6-mobile 中都是 2.0 版本),这块同步后,释放出 60k。

有重复的 algorithm,原因是 g6-core 里和 g6-mobile 用的版本不一致,(直接 build:g6-mobile 导致的,没有build g6-core,从 core 子包下找的 依赖 )同步后释放 10k。

node_modules 中其他无用的包

接下来重点放在 370k 的 其他 node modules 上:

  • 100k 的 regl,是 webgl 需要的包,移动端不需要。溯源查了下,发现只有 @antv/g-webgpu 中引了 regl,这在 layout 和 webgpu 优化完之后,空间也可以释放掉。
  • 33k 的 hierarchy,tree graph 需要,考虑把 tree graph 拆到 拓展包。
  • 30k 的 darge,也是布局引入的,拆出 layout 之后可以释放。
  • 45k 的 inversify, webgpu 引入,拆出 layout 之后可以释放。

总结

目前包体积 1.3M。 可优化项:

  • g-mobile 发布后,不再有重复的 g-base , @antv/util 依赖,释放 120k。

  • @antv/layout 拆到拓展包,释放 @antv/g-webgpu 相关包、regl、inversify、darge,释放520k。

  • tree graph 抽到 拓展包,释放 hierarchy,释放 30k。

  • 解决 g6-core、g6-mobile 中的 gl-matrix 和 algorithm 版本不同步的问题,释放 60k。

  • 总计核心包 500k 左右,包括

    • g-mobile 100k
    • g-base 100k
    • g6-mobile 50k
    • g6-core 150k
    • node_modules 100k