refactor: optimize bundling performance, pre-transpile client code so that sites don't have to

[slorber]

Motivation

The idea is that sites should not need to transpile official Docusaurus client code, saving time when bundling.

We can ship those client libs pre-transpiled by default so that they can be excluded from our JS loader.

There are some challenges to resolve:

• Does it have a significant perf impact?
• What's the ideal config for transpiling our client code?
• Is it safe regarding browserlist config?
• We should ensure swizzled JS components are still readable (is preserve JSX)
• Will ESM-only libs be a problem?
• Translation extraction should still work, and currently assume JSX (<Translate> is preserved)
• Should we still transpile third-party client code?

Test Plan

tests + CI + dogfood

Test links

https://deploy-preview-10062--docusaurus-2.netlify.app/

[netlify]

✅ [V2]

Name	Link
🔨 Latest commit	7f4dbef
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/662a9aa31c7dc4000898aa5c
😎 Deploy Preview	https://deploy-preview-10062--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

⚡️ Lighthouse report for the deploy preview of this PR

URL	Performance	Accessibility	Best Practices	SEO	PWA	Report
/	🟠 70	🟢 98	🟢 96	🟢 100	🟠 88	Report
/docs/installation	🟠 59	🟢 96	🟢 100	🟢 100	🟠 88	Report
/docs/category/getting-started	🟠 77	🟢 100	🟢 100	🟢 90	🟠 88	Report
/blog	🟠 67	🟢 100	🟢 100	🟢 90	🟠 88	Report
/blog/preparing-your-site-for-docusaurus-v3	🟠 63	🟢 96	🟢 100	🟢 100	🟠 88	Report
/blog/tags/release	🟠 69	🟢 100	🟢 100	🟠 80	🟠 88	Report
/blog/tags	🟠 73	🟢 100	🟢 100	🟢 90	🟠 88	Report

[github-actions]

Size Change: -39.8 kB (-2%)

Total Size: 1.55 MB

Filename	Size	Change
website/build/assets/js/main.********.js	770 kB	-39.8 kB (-5%)	✅

ℹ️ View Unchanged

Filename	Size
website/.docusaurus/codeTranslations.json	2 B
website/.docusaurus/docusaurus.config.mjs	26.7 kB
website/.docusaurus/globalData.json	91.2 kB
website/.docusaurus/i18n.json	930 B
website/.docusaurus/registry.js	247 kB
website/.docusaurus/routes.js	156 kB
website/.docusaurus/routesChunkNames.json	109 kB
website/.docusaurus/site-metadata.json	2.17 kB
website/build/assets/css/styles.********.css	113 kB
website/build/index.html	38 kB

_{compressed-size-action}

[slorber]

I decided to stop investigating this optimization for now, because the impact is not significant enough compared to the extra complexity it involves.

Here's the result on my computer (Mac M3)

Bundling the initial template (contains few docs, mostly the theme code):

• Before: bundles in 6.7s
• After: bundles in 6.2s

Bundling our website (more docs):

• Before: bundles in 45s
• After: bundles in 44s

So:

• We save less than 1sec (on a fast computer though)
• This saving does not scale with the size of a site, this only applies to our theme files, and the number of files does not grow over time
• It mostly impacts cold builds, and not incremental build using Webpack cache
• It slows down the DX by requiring to emit our theme code in 2 variants (pretranspiled + beautiful JSX for sizzling purpose)

For that reason, let's close this for now