search

nuxt-modules / mdc

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

There's a problem with the MDC component that makes it too heavy and ruins your website's performance (blocking resource) #101

Open imlautaro opened 10 months ago

imlautaro commented 10 months ago

I don't know what is the exact problem but there's something wrong for sure because it doesn't happens with the nuxt/content module.

 WARN                                                                                                                                                                    20:26:55  
(!) Some chunks are larger than 500 kBs after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
nobkd commented 10 months ago

Not sure, what exactly causes this, but #93 (with nuxt/content#2422) might be related?

imlautaro commented 10 months ago

Not sure, what exactly causes this, but #93 (with nuxt/content#2422) might be related?

Actually it's weird because if I use the utility "parseMarkdown" from "@nuxtjs/MDC/runtime" but rendering it with the ContentRenderer from "nuxt/content", it's still heavy but not that much, it doesn't affect that much to the performance and it's "acceptable"

Sfolkerts89 commented 5 months ago

I have found the same issue. The MDC script is over 60% in size of the client bundle and seems to render client side. Which makes little to no sense to me.

stefanobartoletti commented 5 months ago

I'm not sure if this is related, but I just opened an issue concerning the remark-emoji dependency, which is quite heavy #187

And I agree that is a bit weird that this is client-side script.

Sfolkerts89 commented 5 months ago

I have managed to write a composable that uses MDC to render an HTML object and then returns this as a string. This renders server side and in my test repo, i have seen a block time decrease from 1270ms to just 420ms on mobile (Lighthouse).

Im pretty sure it can be written more effeciently, but it does the job!

EDIT: It still seems to still bundle the MDC script to the client, but the performance is already major (1270 to 420 ms as mentioned)

EDIT nr. 2:

Using the experimental feature: 'componentIslands' and adding the 'server' suffix to my component, the mobile performance index in Lighthouse went from 90 to 100. Using this feature before my composable didnt yield any difference.

Here's the composable: https://github.com/Sfolkerts89/Nuxt3-starter__Decap-cms/blob/main/composables/mdToHtml.js

And here is the component i use to mount/ render: https://github.com/Sfolkerts89/Nuxt3-starter__Decap-cms/blob/main/components/misc/ParseMarkdown.vue