g6-mobile 初始版本打包之后发现体积很大,parse 之后 1.3 M,gzip 之后 330k,这个尺寸移动端难以接受。 具体打包状况如下: 几个比较大的部分:
可以看出有一下几点问题:
当前 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-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 的空间。
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。
接下来重点放在 370k 的 其他 node modules 上:
目前包体积 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 左右,包括