[Bug]: 打包体积有1.8M

[yvonneyx]

Describe the bug / 问题描述

【用户反馈】

我vue3+vite引入@antv/g6": "^5.0.45"，打包前后对比，还是大了1.8M，并没有减小到0.96M么

Reproduction link / 复现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

No response

Version / 版本

🆕 5.x

OS / 操作系统

• [ ] macOS
• [ ] Windows
• [ ] Linux
• [ ] Others / 其他

Browser / 浏览器

• [ ] Chrome
• [ ] Edge
• [ ] Firefox
• [ ] Safari (Limited support / 有限支持)
• [ ] IE (Nonsupport / 不支持)
• [ ] Others / 其他

[hustcc]

有定位到问题嘛

[xiaweiss]

@hustcc 依赖文件都全量导入了，例如 lodash

[xiaweiss]

另外我只用到一个 layout，结果所有 layout 都打包进来了。完全没有按需打包。

[hustcc]

问题应该不是 layout，layout 确实是代码中全部引入的。从图里面看有重复的包，lodash 理论上 AntV 没有用到。

这个图是 G6 的构建图，还是从业务代码中打包出来的？

[hustcc]

G6 构建出来的包是这么大。

[xiaweiss]

vue 项目中引入，vite 配置了 @antv/g6 单独分包，然后 vite build 的结果。包体积和 min.js 差不多。1.1 MB

[hustcc]

vue 项目中引入，vite 配置了 @antv/g6 单独分包，然后 vite build 的结果。包体积和 min.js 差不多。1.1 MB

1.1m 那就是差不多的，g6 刚发版本的时候是不到 1m，后来好像加了一个最短路径算法，涨了 100k。估计看看代码也能优化一点包大小，看看有没有正确来试试😁

[xiaweiss]

@hustcc 目前 vite 提示这个包太大了，有没有什么手动分拆的方式？

[xiaweiss]

目前 vite 我没有找到可以配置「子依赖」分包的方式，建议你们发布时拆分为多个包来发布，用户就可以按需要引入了。至少一拆三吧，就能 500 kb 以下了

[xiaweiss]

@hustcc 我现在是个 SPA 单页面应用。

加入 @antv/g6 依赖后，我电脑本地 vite build 打包时间多了 10s 以上，实际上包没有变小，没有任何打包的必要。

目前 g6.min.js 没有导出模块，也无法在打包过程中用以下配置跳过

rollupOptions: {
      external: ['@antv/g6'],
      output: {
        paths: {
          '@antv/g6': 'https://unpkg.com/@antv/[email protected]/dist/g6.min.js'
        }
      },
    }

我现在不得不放弃 ts 类型提示，这样来使用：

onMounted(async () => {
  await import('https://unpkg.com/@antv/[email protected]/dist/g6.min.js')

  const { Graph } = window.G6
  const graph = new Graph({...})
})

如果能有个导出模块的 es 压缩版本，使用就简单些了，能获得类型：

onMounted(async () => {
  const G6 = await import('@antv/g6')

  const { Graph } = G6
  const graph = new Graph({...})
})

[xiaweiss]

另外 JS 包体积大，加载速度超级慢，unpkg 实际测试需要接近 2 秒，这还是 Wi-Fi 环境下，用户手机上会更加慢

[hustcc]

国内生产环境别用 unpkg，国外的，就是比较慢，找个国内的 CDN 服务～

[xiaweiss]

那文档是不是改一下，给个可靠的 cdn 服务，或者加个提示？

[hustcc]

那文档是不是改一下，给个可靠的 cdn 服务，或者加个提示？

有道理，我看到的文档确实写的是 unpkg。

@yvonneyx 我们有 G6 按需构建打包的方法吗？这样开发者用到什么就构建设么，特别是布局比较占包大小。

[yvonneyx]

那文档是不是改一下，给个可靠的 cdn 服务，或者加个提示？

可以先用这个 https://www.bootcdn.cn/antv-g6/

[hustcc]

加入 @antv/g6 依赖后，我电脑本地 vite build 打包时间多了 10s 以上，实际上包没有变小，没有任何打包的必要。

为啥 external 了还会增加构建时间？

[xiaweiss]

external 不会增加构建时间

如果是安装依赖，并且 import { Graph } from '@antv/g6' 会增加构建时间