Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(core): faster transpiler option - siteConfig.future.experimental_faster.swcJsLoader #10435

Merged
merged 21 commits into from
Aug 23, 2024

Conversation

slorber
Copy link
Collaborator

@slorber slorber commented Aug 22, 2024

Docusaurus Faster

This PR is part of the Docusaurus Faster project aiming at reducing production build times

Disclaimer

Switching from Babel to SWC might not give you a huge speed boost:

  • The JS transpiler is not the main bottleneck of Docusaurus
  • It depends on the amount of React code in your site (we don't transpile anymore MDX docs)
  • There's a cost when calling a Rust tool from a JS loader

However, we still encourage you to try the new SWC loader.

In the future, we plan to use the Rust Rspack bundler with its built-in SWC loader (not needing JS <-> Rust communication) and expect it to be much faster than Babel.

Motivation: replace slow Babel with fast SWC

By default, Docusaurus uses Babel to transpile JS / TS / React code. It has served us well, but nowadays there are much faster Rust/Go alternatives doing the same job.

We already have the option to provide a custom js loader for a while now: siteConfig.webpack.jsLoader. This has been leveraged by our community to use swc or esbuild instead of Babel (see #4765).

Including us! We have used a custom swc loader for a while on our website.

Now is a good time to add a feature flag to swap Babel for SWC.

const siteConfig = {
    future: {
      experimental_faster: {
        swcJsLoader: true,
      },
    }
};

Depending on user feedback, we could make SWC the default option in the next major version of Docusaurus.

This option requires adding the package @docusaurus/faster to your dependencies.

About future.experimental_faster

You might wonder why this config looks so complex/nested:

This option is the first of a series of new options to modernize the Docusaurus infrastructure and make it much faster to build.

Use Docusaurus Faster

  1. Add @docusaurus/faster to your site.

@docusaurus/faster is a new optional package created to encapsulate all the modern tools we plan to introduce in the future. People who do not want to use these new tools will not be penalized by downloading extra useless dependencies by default.

  1. Turn on the faster options

You can turn on individual options through siteConfig.future.experimental_faster, such as swcJsLoader: true.

As a convenience, we also let you opt-in for all the options at once:

const siteConfig = {
    future: {
      experimental_faster: true,
    }
};

New faster options can be released in minor versions. Make sure your site works as intended after upgrading.

Test Plan

CI + dogfood on our website + E2E on init template with faster options disabled

Test links

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

@slorber slorber added the pr: new feature This PR adds a new API or behavior. label Aug 22, 2024
@slorber slorber requested a review from Josh-Cena as a code owner August 22, 2024 16:19
@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Aug 22, 2024
Copy link

socket-security bot commented Aug 22, 2024

New dependencies detected. Learn more about Socket for GitHub ↗︎

Package New capabilities Transitives Size Publisher
npm/@argos-ci/[email protected] Transitive: environment, filesystem +5 172 kB neoziro
npm/@mdx-js/[email protected] Transitive: environment +1 277 kB johno
npm/@netlify/[email protected] None +1 20.6 kB netlify-bot
npm/@playwright/[email protected] None 0 25.4 kB dgozman-ms, mxschmitt, pavelfeldman, ...1 more
npm/[email protected] None 0 1.25 MB feedic

View full report↗︎

Copy link

netlify bot commented Aug 22, 2024

[V2]

Name Link
🔨 Latest commit 9b5af0a
🔍 Latest deploy log https://app.netlify.com/sites/docusaurus-2/deploys/66c871c1967fc400085e4cf2
😎 Deploy Preview https://deploy-preview-10435--docusaurus-2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link

github-actions bot commented Aug 22, 2024

⚡️ Lighthouse report for the deploy preview of this PR

URL Performance Accessibility Best Practices SEO Report
/ 🟠 75 🟢 98 🟢 96 🟢 100 Report
/docs/installation 🟠 54 🟢 97 🟢 100 🟢 100 Report
/docs/category/getting-started 🟠 74 🟢 100 🟢 100 🟠 86 Report
/blog 🟠 68 🟢 96 🟢 100 🟠 86 Report
/blog/preparing-your-site-for-docusaurus-v3 🔴 48 🟢 92 🟢 100 🟢 100 Report
/blog/tags/release 🟠 68 🟢 96 🟢 100 🟠 86 Report
/blog/tags 🟠 74 🟢 100 🟢 100 🟠 86 Report

Copy link

github-actions bot commented Aug 22, 2024

Size Change: +2.28 kB (+0.02%)

Total Size: 11.6 MB

Filename Size Change
website/.docusaurus/docusaurus.config.mjs 27.8 kB +45 B (+0.16%)
website/build/assets/js/main.********.js 678 kB +220 B (+0.03%)
website/build/docs/api/docusaurus-config.html 201 kB +1.64 kB (+0.82%)
ℹ️ View Unchanged
Filename Size Change
website/.docusaurus/codeTranslations.json 2 B 0 B
website/.docusaurus/globalData.json 30.2 kB 0 B
website/.docusaurus/i18n.json 930 B 0 B
website/.docusaurus/registry.js 155 kB 0 B
website/.docusaurus/routes.js 74.3 kB 0 B
website/.docusaurus/routesChunkNames.json 81.7 kB 0 B
website/.docusaurus/site-metadata.json 2.17 kB 0 B
website/build/assets/css/styles.********.css 113 kB 0 B
website/build/blog.html 61.4 kB 0 B
website/build/blog/2017/12/14/introducing-docusaurus.html 74.8 kB -1 B (0%)
website/build/blog/2018/04/30/How-I-Converted-Profilo-To-Docusaurus.html 47.3 kB +12 B (+0.03%)
website/build/blog/2018/09/11/Towards-Docusaurus-2.html 51.7 kB +12 B (+0.02%)
website/build/blog/2018/12/14/Happy-First-Birthday-Slash.html 33.3 kB -1 B (0%)
website/build/blog/2019/12/30/docusaurus-2019-recap.html 39.6 kB -1 B (0%)
website/build/blog/2020/01/07/tribute-to-endi.html 34 kB -1 B (0%)
website/build/blog/2021/01/19/docusaurus-2020-recap.html 48.9 kB -1 B (0%)
website/build/blog/2021/03/09/releasing-docusaurus-i18n.html 45.1 kB -1 B (0%)
website/build/blog/2021/05/12/announcing-docusaurus-two-beta.html 51.9 kB -1 B (0%)
website/build/blog/2021/11/21/algolia-docsearch-migration.html 53 kB +12 B (+0.02%)
website/build/blog/2022/01/24/docusaurus-2021-recap.html 44.5 kB -1 B (0%)
website/build/blog/2022/08/01/announcing-docusaurus-2.0.html 142 kB -1 B (0%)
website/build/blog/2022/09/01/docusaurus-2.1.html 50.9 kB -1 B (0%)
website/build/blog/archive.html 24.7 kB 0 B
website/build/blog/authors.html 46.5 kB 0 B
website/build/blog/authors/j-marcey.html 75 kB 0 B
website/build/blog/authors/josh-cena.html 45.9 kB 0 B
website/build/blog/authors/lex-111.html 57.4 kB 0 B
website/build/blog/authors/slorber.html 61.5 kB 0 B
website/build/blog/authors/slorber/authors/2.html 65.4 kB 0 B
website/build/blog/authors/slorber/authors/3.html 84.9 kB 0 B
website/build/blog/authors/slorber/authors/4.html 44.7 kB 0 B
website/build/blog/authors/yangshun.html 65 kB 0 B
website/build/blog/authors/zpao.html 46.3 kB 0 B
website/build/blog/page/2.html 66 kB 0 B
website/build/blog/page/3.html 74.6 kB 0 B
website/build/blog/page/4.html 68.6 kB 0 B
website/build/blog/page/5.html 44.7 kB 0 B
website/build/blog/preparing-your-site-for-docusaurus-v3.html 138 kB -1 B (0%)
website/build/blog/releases/2.2.html 49.6 kB 0 B
website/build/blog/releases/2.3.html 60.8 kB 0 B
website/build/blog/releases/2.4.html 65.3 kB 0 B
website/build/blog/releases/3.0.html 111 kB +12 B (+0.01%)
website/build/blog/releases/3.1.html 52 kB +1 B (0%)
website/build/blog/releases/3.2.html 48.8 kB 0 B
website/build/blog/releases/3.3.html 55.5 kB 0 B
website/build/blog/releases/3.4.html 55.8 kB +7 B (+0.01%)
website/build/blog/releases/3.5.html 58.1 kB +5 B (+0.01%)
website/build/blog/tags.html 28.6 kB 0 B
website/build/blog/upgrading-frontend-dependencies-with-confidence-using-visual-regression-testing.html 128 kB 0 B
website/build/docs.html 49.4 kB +9 B (+0.02%)
website/build/docs/advanced.html 31.1 kB 0 B
website/build/docs/advanced/architecture.html 30.7 kB +4 B (+0.01%)
website/build/docs/advanced/client.html 76 kB 0 B
website/build/docs/advanced/plugins.html 58.6 kB 0 B
website/build/docs/advanced/routing.html 73.9 kB +8 B (+0.01%)
website/build/docs/advanced/ssg.html 81.5 kB 0 B
website/build/docs/api/misc/@docusaurus/eslint-plugin.html 48.3 kB +4 B (+0.01%)
website/build/docs/api/misc/@docusaurus/eslint-plugin/no-html-links.html 38.1 kB 0 B
website/build/docs/api/misc/@docusaurus/eslint-plugin/no-untranslated-text.html 37 kB 0 B
website/build/docs/api/misc/@docusaurus/eslint-plugin/prefer-docusaurus-heading.html 38.3 kB +4 B (+0.01%)
website/build/docs/api/misc/@docusaurus/eslint-plugin/string-literal-i18n-messages.html 41.9 kB 0 B
website/build/docs/api/misc/@docusaurus/logger.html 39.8 kB 0 B
website/build/docs/api/misc/create-docusaurus.html 34.9 kB 0 B
website/build/docs/api/plugin-methods.html 67.4 kB +4 B (+0.01%)
website/build/docs/api/plugin-methods/extend-infrastructure.html 63 kB +4 B (+0.01%)
website/build/docs/api/plugin-methods/i18n-lifecycles.html 60.7 kB +4 B (+0.01%)
website/build/docs/api/plugin-methods/lifecycle-apis.html 170 kB 0 B
website/build/docs/api/plugin-methods/static-methods.html 46.5 kB +4 B (+0.01%)
website/build/docs/api/plugins.html 31.7 kB 0 B
website/build/docs/api/plugins/@docusaurus/plugin-client-redirects.html 62.6 kB +13 B (+0.02%)
website/build/docs/api/plugins/@docusaurus/plugin-content-blog.html 198 kB +13 B (+0.01%)
website/build/docs/api/plugins/@docusaurus/plugin-content-docs.html 202 kB +9 B (0%)
website/build/docs/api/plugins/@docusaurus/plugin-content-pages.html 78 kB 0 B
website/build/docs/api/plugins/@docusaurus/plugin-debug.html 50.5 kB 0 B
website/build/docs/api/plugins/@docusaurus/plugin-google-analytics.html 51.5 kB 0 B
website/build/docs/api/plugins/@docusaurus/plugin-google-gtag.html 51 kB -4 B (-0.01%)
website/build/docs/api/plugins/@docusaurus/plugin-google-tag-manager.html 49.8 kB 0 B
website/build/docs/api/plugins/@docusaurus/plugin-ideal-image.html 51.1 kB +4 B (+0.01%)
website/build/docs/api/plugins/@docusaurus/plugin-pwa.html 122 kB +4 B (0%)
website/build/docs/api/plugins/@docusaurus/plugin-sitemap.html 68.5 kB +6 B (+0.01%)
website/build/docs/api/plugins/@docusaurus/plugin-vercel-analytics.html 42.2 kB +12 B (+0.03%)
website/build/docs/api/themes.html 30.4 kB 0 B
website/build/docs/api/themes/@docusaurus/theme-classic.html 46.4 kB +4 B (+0.01%)
website/build/docs/api/themes/@docusaurus/theme-live-codeblock.html 38.6 kB +4 B (+0.01%)
website/build/docs/api/themes/@docusaurus/theme-mermaid.html 37.5 kB +4 B (+0.01%)
website/build/docs/api/themes/@docusaurus/theme-search-algolia.html 34.7 kB 0 B
website/build/docs/api/themes/configuration.html 256 kB +7 B (0%)
website/build/docs/blog.html 219 kB +6 B (0%)
website/build/docs/browser-support.html 51 kB 0 B
website/build/docs/category/getting-started.html 28.3 kB 0 B
website/build/docs/category/guides.html 36.4 kB 0 B
website/build/docs/cli.html 63.8 kB +1 B (0%)
website/build/docs/configuration.html 98.5 kB +4 B (0%)
website/build/docs/create-doc.html 65.3 kB +12 B (+0.02%)
website/build/docs/creating-pages.html 59.1 kB +1 B (0%)
website/build/docs/deployment.html 211 kB +9 B (0%)
website/build/docs/docs-introduction.html 53.6 kB 0 B
website/build/docs/docs-multi-instance.html 78.7 kB +4 B (+0.01%)
website/build/docs/docusaurus-core.html 245 kB 0 B
website/build/docs/guides/whats-next.html 32.8 kB 0 B
website/build/docs/i18n/crowdin.html 151 kB +12 B (+0.01%)
website/build/docs/i18n/git.html 82.7 kB +4 B (0%)
website/build/docs/i18n/introduction.html 50.8 kB 0 B
website/build/docs/i18n/tutorial.html 171 kB +13 B (+0.01%)
website/build/docs/installation.html 73 kB +12 B (+0.02%)
website/build/docs/introduction/index.html 280 B 0 B
website/build/docs/markdown-features.html 83.2 kB +1 B (0%)
website/build/docs/markdown-features/admonitions.html 119 kB +4 B (0%)
website/build/docs/markdown-features/assets.html 93.5 kB +2 B (0%)
website/build/docs/markdown-features/code-blocks.html 245 kB +4 B (0%)
website/build/docs/markdown-features/diagrams.html 56 kB +14 B (+0.02%)
website/build/docs/markdown-features/head-metadata.html 52.8 kB 0 B
website/build/docs/markdown-features/links.html 43.1 kB 0 B
website/build/docs/markdown-features/math-equations.html 95.4 kB +11 B (+0.01%)
website/build/docs/markdown-features/plugins.html 101 kB +8 B (+0.01%)
website/build/docs/markdown-features/react.html 144 kB 0 B
website/build/docs/markdown-features/tabs.html 148 kB 0 B
website/build/docs/markdown-features/toc.html 88.8 kB +4 B (0%)
website/build/docs/migration.html 43 kB -1 B (0%)
website/build/docs/migration/v2.html 41.3 kB 0 B
website/build/docs/migration/v2/automated.html 42.6 kB 0 B
website/build/docs/migration/v2/manual.html 207 kB 0 B
website/build/docs/migration/v2/translated-sites.html 52.8 kB 0 B
website/build/docs/migration/v2/versioned-sites.html 67.2 kB 0 B
website/build/docs/migration/v3.html 218 kB +1 B (0%)
website/build/docs/playground.html 32.5 kB 0 B
website/build/docs/resources/index.html 325 B 0 B
website/build/docs/search.html 121 kB +1 B (0%)
website/build/docs/seo.html 93 kB +13 B (+0.01%)
website/build/docs/sidebar.html 136 kB +4 B (0%)
website/build/docs/sidebar/autogenerated.html 156 kB +13 B (+0.01%)
website/build/docs/sidebar/items.html 188 kB 0 B
website/build/docs/sidebar/multiple-sidebars.html 67.1 kB +4 B (+0.01%)
website/build/docs/static-assets.html 56.3 kB +4 B (+0.01%)
website/build/docs/styling-layout.html 141 kB 0 B
website/build/docs/support/index.html 319 B 0 B
website/build/docs/swizzling.html 120 kB +14 B (+0.01%)
website/build/docs/team/index.html 310 B 0 B
website/build/docs/typescript-support.html 65.4 kB 0 B
website/build/docs/using-plugins.html 115 kB +13 B (+0.01%)
website/build/docs/versioning.html 87.1 kB +13 B (+0.01%)
website/build/index.html 37.8 kB 0 B

compressed-size-action

@slorber slorber added the Argos Add this label to run UI visual regression tests. See argos.yml GH action. label Aug 23, 2024
Copy link

argos-ci bot commented Aug 23, 2024

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build Status Details Updated (UTC)
default (Inspect) ⚠️ Changes detected (Review) 1 changed Aug 23, 2024, 11:46 AM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Argos Add this label to run UI visual regression tests. See argos.yml GH action. CLA Signed Signed Facebook CLA pr: new feature This PR adds a new API or behavior.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants