nuxt-modules / mdc

MDC supercharges regular Markdown to write documents interacting deeply with any Vue component.
MIT License
194 stars 22 forks source link

Please provide a "server-only" mode to avoid excessive client-site bundle size #248

Open stefanobartoletti opened 2 months ago

stefanobartoletti commented 2 months ago

Just like the title says, please provide a server-only mode that will not include all dependencies in the client-side bundles.

The use-case scenario is like that:

Currently, a lot of heavy dependencies are still included in the final client bundles, like shiki and all its code syntax definitions and sub-deps, emojilib (see #187), and possibly other.

Some client-size bundle analysis by running nuxi analyze without MDC dependencies:

Screenshot_20240821_053635

And with MDC included:

Screenshot_20240821_053339

As you can see, the final global size is more than doubled, and all that code is never used again after the fetch & transform from the CMS (also note that this specific project is already quite heavy as it packs some animation and 3D libraries, in a more standard project the ratio between MDC code and other would be even more unbalanced)

There is an old comment where a possible addition of server-only and client-only modes was mentioned (https://github.com/nuxt-modules/mdc/issues/135#issuecomment-1927051823 ), is this still a planned feature?

stefanobartoletti commented 1 month ago

After updating to version v0.9.0, this problem has been mitigated, I think by implementing some dynamic import from #253

Screenshot_20240913_062515

As you can see, now the bundle is significantly lighter than before.

@farnabaz I'm not sure if the changes incorporated from this PR can also be applied to the remaining dependencies (probably not), but maybe this is a first step into making this package of a decent size for production environments.

Thanks for your work!