web: lazy-load code-insights components and `highlight.js`
Created by: valerybugakov
Context
To make our bundle smaller and reduce the initial loading time of the web application, we can lazy-load heavy dependencies and optional components.
Changes
-
highlight.js
modules specific to different languages are now lazy-loaded. - code-insights components are lazy-loaded to avoid including
d3.js
,react-draggable-grid
,visx
, andsrc/enterprise/insights
into the main bundle.
Results
The main bundle is 18.93% smaller. 132kb gzipped size was cut from the main bundle.
Before | After |
---|---|
Further improvements
-
https://github.com/sourcegraph/sourcegraph/issues/26841 —
htmlparser2
,postcss
,marked
are required for the synchronousrenderMarkdown
function. To make it lazy-loadable a considerable time investment is required. The benefits would be noticeable: ~55kb gzip. https://github.com/sourcegraph/sourcegraph/blob/6805b81059190e86edcb8a257ca8bec834e81f1c/client/shared/src/util/markdown.ts#L55 - https://github.com/sourcegraph/sourcegraph/issues/26840 — Lazy-loading Sentry would yield another ~86kb gzip cut in the main bundle size.
- Splitting
site-admin/backend.ts
into multiple modules would allow to lazy-load parts of it, but the benefits won't be as noticeable: ~5kb gzip.
Closes https://github.com/sourcegraph/sourcegraph/issues/26433.