Ant making bundle size increase significantly

hey Plasmic peeps! have a question with @plasmicpkgs/antd bundling, would appreciate your insight

started seeing our Next.js bundles increase considerably in size after we imported the Antd package in our Plasmic project. Dug a little deeper into it and it seems that just importing a single object from @plasmicpkgs/antd results in a huge bundle with all antd dependencies included, along with some rc- and lodash helpers (treemap screenshot included)

so something like import {Collapse} from '@plasmicpkgs/antd' will result in a huge bundle included in the final build with what seems like a lot of dead code in it

but using the Antd dependency directly, like import { Collapse } from 'antd' will result in an optimized bundle with only used dependencies included (treemap screenshot also attached)

seems to me @plasmicpkgs/antd is adding some overhead or preventing treeshaking from occurring?

we’re working on better tree-shaking here… stay tuned…

We’ve released an updated version of @plasmicpkgs/antd. Please register the collapse panel this way:

import { registerCollapse, registerCollapsePanel } from "@plasmicpkgs/antd/skinny/registerCollapse";

registerCollapse();
registerCollapsePanel();

Amazing! Thanks for fixing it so quickly Chung and team!

question though, where should we place that new registerCollapse from the skinny package? we imported the package directly via the Plasmic Component Store so I’m not sure where it is being declared, I don’t think it is in our codebase?

oh! I see; then you shouldn’t need to do anything there. If you upgrade your @plasmicpkgs/antd package, and do a plasmic sync you should see that the generated code should be importing Collapse from @plasmicpkgs/antd/skinny/registerCollapse now instead

great stuff!

just getting to update our packages, but not seeing any updates available for the antd package, should I do something specific to trigger the update?

image.png

ah! I meant in your code repo :slightly_smiling_face: yarn add etc

oh of course, makes sense. thanks!

sorry for bothering you so much with this!

still unable to see the skinny package being used

i updated our package.json dependency on @plasmicpkgs/antd to version 0.77, and ran a few plasmic sync commands, but the auto-generated code still calls for the non-skinny version of the dependency

attaching a screenshot of how the Collapse looks inside the Studio’s Components panel. Seems it is not referencing it from our codebase, maybe it could be fixed if I declare the registerCollapse in our own plasmic_host instead of pulling it from wherever the Studio is consulting it?

image.png

we’re currently setting up antd via this “Component Packages” feature

image.png

:thinking_face: I think there’s an issue on our side, will resolve tomorrow!

Could you try it again?

apologies for the delay, can confirm it worked and the new bundle is much more lightweight! thanks for the quick fix @chungwu