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
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?
ah! I meant in your code repo 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?
we’re currently setting up antd via this “Component Packages” feature
I think there’s an issue on our side, will resolve tomorrow!
apologies for the delay, can confirm it worked and the new bundle is much more lightweight! thanks for the quick fix @chungwu