Highlight.js Occupying large bundle size
Highlight.js occupies around 862.99kB of size, but the largest chunks of it belong to languages that are very rarely used. Propose to remove these languages (like Mathematica) from the default built, and add them only if the config files specify that this language needs to be supported.
To generate the below graph to analyze the breakdown of chunk sizes, run npx vite-bundle-visualizer -t sunburst in the frontend folder.
Resource for whoever's interested in tackling this issue: https://github.com/highlightjs/highlight.js#importing-the-library
Hi, could I work on this issue?
@gladwintan Yes, thanks for helping out.
I have looked into this issue and tried the following approaches:
- Specifying common languages to import in a utility file so only necessary imports are bundled. However, this does not provide flexibility for end users to add/remove languages.
- Use a config file to specify the languages required, fetch config from frontend and dynamically import the languages using CDN. This effectively removes the bundle as necessary languages are only fetched at runtime of the application. However, highlightJs from CDN adds CSS classes differently and existing classes need to be manually changed.
Are there any other possible approaches to tackle this issue or would one of these approaches be sufficient?