G6 Mobile 包体积优化

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

• 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 大小。 这种情况在正式发包的时候不会出现。手动把 g-base 全部指向 本地之后，不再有重复的 g-base，总包大小来到 1.22 M。 同时也看到 g-base 总共只有 120k 左右，即使立即改造 g-base ，把 document svg 相关内容剥离优化，带来的收益也很有限： 同样的重复问题还有 @antv/util，g-mobile 发包之后正常引入应该就不会有问题，会释放 20k。

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

• 遵循不改动 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 主包拆开，不提供内置布局，或只提供最简单的一种内置布局，把布局作为拓展包，用户按需引入。

  • 目前 @antv/layout 直接引入了所有布局并自动注册，https://github.com/antvis/layout/blob/master/src/layout/layout.ts ，需要改造支持 export 各类布局，同时注册布局这一步可选择不做。

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

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

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