ant-design / ant-design-charts

A React Chart Library
https://ant-design-charts.antgroup.com/
MIT License
1.89k stars 359 forks source link

关于打包/tree shaking失效的问题,请求官方查看一下🧐[问题] #2595

Open yuzhongtao238910 opened 1 month ago

yuzhongtao238910 commented 1 month ago

🧐 问题描述 [详细地描述问题,让大家都能理解]

事情的起因:之前公司使用的图表库是echarts,echarts的使用方式是import * as echarts from "echarts",这样做会导致echarts的全量引入,在打包的时候体积就会特别的大

公司目前在做技术调研,希望寻找替代的,在调研@ant-design-charts,在示例的官方案例之中发现是可以只导入某个图表的,例如折线图,柱形图,等等,而不是全量引入,我通过vite+react来测试,却发现在在实际的打包过程之中,还是全量的打包了,请见下方

💻 示例代码 [如果有必要,展示代码,线上示例,或仓库]

我在react的组件之中这样引入(为了确保是es版本,实现tree shaking) import Line from '@ant-design/plots/es/components/line'; 却发现打包之后chunk1000多k, 我在vite.config.js之中配置manualChunks,通过id查看,确实有很多的无关组件被打包进来 build: { minify: "terser", rollupOptions: { treeshake: true, output: { minifyInternalExports: true, manualChunks: (id) => { console.log(id) } } } } 下方是我打包的结果,输出的id 7c1a6ef27b5d22dd9dc66a822e54f06

这个是我在分离chunk的时候发现的,包的体积比较大,和你们的官网放的cdn链接对应的js文件的大小差不多 d42dd4980d6e8e30441414f2566cab3

所以是为什么没有实现tree shaking,我只引入了一个line啊,而且为了保险,我还是特意去的es下面的来进行引入的???

🚑 其他信息 [如截图等其他信息可以贴在这里]

可以帮我解答吗?

yuzhongtao238910 commented 1 month ago

webpack,我通过cra创建一个react项目,打包后还是这个问题,而且webpack打包后的体积相对大一点,打包完成后是1.5Kb,所以官方可以看一下,我在webpack里面配置了splitChunk 发现还有很多类似于 antv d3的系列的包被打包进来?是有依赖嘛?