Open yuzhongtao238910 opened 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
这个是我在分离chunk的时候发现的,包的体积比较大,和你们的官网放的cdn链接对应的js文件的大小差不多
所以是为什么没有实现tree shaking,我只引入了一个line啊,而且为了保险,我还是特意去的es下面的来进行引入的???
可以帮我解答吗?
webpack,我通过cra创建一个react项目,打包后还是这个问题,而且webpack打包后的体积相对大一点,打包完成后是1.5Kb,所以官方可以看一下,我在webpack里面配置了splitChunk 发现还有很多类似于 antv d3的系列的包被打包进来?是有依赖嘛?
🧐 问题描述 [详细地描述问题,让大家都能理解]
事情的起因:之前公司使用的图表库是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](https://github.com/user-attachments/assets/17e43656-09c1-4126-ac29-502e1f093f95)
这个是我在分离chunk的时候发现的,包的体积比较大,和你们的官网放的cdn链接对应的js文件的大小差不多![d42dd4980d6e8e30441414f2566cab3](https://github.com/user-attachments/assets/a4d471b5-11fe-45fd-b1a8-17e95d8f5079)
所以是为什么没有实现tree shaking,我只引入了一个line啊,而且为了保险,我还是特意去的es下面的来进行引入的???
🚑 其他信息 [如截图等其他信息可以贴在这里]
可以帮我解答吗?