NotionX / NotionX/react-notion-x
Reduce bundle size of Code by lazy loading prismjs components
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 5.4k
- Forks
- 645
- PR merge metrics
- No merged PRs in 30d
Description
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?
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the /third-party/code component and compare its current imports with the in-house LazyCode.tsx implementation linked in the issue. Determine whether lazy loading should be added as a separate component or become the default for Code; done means the needed prismjs modules still render correctly and the Code bundle is measurably smaller.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, performance
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100