Reduce bundle size of Code by lazy loading prismjs components

[MartinXPN]

trafficstars

It seems like currently the /third-party/code component imports a lot of prismjs modules (which sometimes are not needed). That increases the bundle size when importing Code component by 30+KB (after gzip).

I think there is a possibility of having a LazyCode component that would lazy-load the needed modules (or maybe make this a default behavior for the Code component).

I have created an in-house version of the LazyCode component in our project: https://github.com/MartinXPN/profound.academy/blob/main/src/common/notion/LazyCode.tsx

It would be awesome to have this functionality right in the react-notion-x library. Do you think that would be possible?

[ntcho]

I think it is a great idea. Would be awesome if the module can be lazy loaded :+1:

[transitive-bullshit]

I implemented something similar in https://github.com/NotionX/react-notion-x/blob/master/examples/full/components/NotionPage.tsx#L19-L57

The core third-party Code now just includes JS, TS, and CSS by default.

I think the idea of having a LazyCode which loads these dependencies on demand is great, but in terms of bundling that into react-notion-x, it becomes really difficult to do this as an npm package that can be consumed by lots of different bundlers. It may be possible to do this in a really generic way, but I've found that being explicit is better than being implicit for these types of things — since there are just so many cases where people will use your package in unexpected ways.