RepoSense icon indicating copy to clipboard operation
RepoSense copied to clipboard

Highlight.js Occupying large bundle size

Open joeng03 opened this issue 9 months ago • 4 comments

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.

Image

joeng03 avatar Mar 16 '25 01:03 joeng03

Resource for whoever's interested in tackling this issue: https://github.com/highlightjs/highlight.js#importing-the-library

sopa301 avatar Mar 17 '25 03:03 sopa301

Hi, could I work on this issue?

gladwintan avatar Aug 17 '25 09:08 gladwintan

@gladwintan Yes, thanks for helping out.

CYX22222003 avatar Aug 17 '25 16:08 CYX22222003

I have looked into this issue and tried the following approaches:

  1. 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.
  2. 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?

gladwintan avatar Aug 24 '25 12:08 gladwintan