{
  "$type": "site.standard.document",
  "canonicalUrl": "https://johnnyreilly.com/posts/faster-docusaurus-build-swc-loader",
  "description": "This post demonstrates how to speed up your Docusaurus build by using SWC and the `swc-loader` for webpack.",
  "path": "/posts/faster-docusaurus-build-swc-loader",
  "publishedAt": "2022-09-29T00:00:00.000Z",
  "site": "at://did:plc:yy3apqjlms24kso7ahn7lbmb/site.standard.publication/3mova7c4nho2b",
  "tags": [
    "docusaurus",
    "webpack"
  ],
  "textContent": "This post demonstrates how to speed up your Docusaurus build by using SWC and the swc-loader for webpack.\n\n\n\nSWC\n\nAt present there's a number of projects which have been providing alternate transpilation mechanisms to transform TypeScript / modern JavaScript into JavaScript that will run widely supported browsers. Historically this has been handled by tools like the TypeScript compiler itself and Babel. Both of these tools are written in TypeScript / JavaScript. The new tools and projects which have been appearing often use languages like Go and Rust which offer the gift of performance gains. Shorter build times in other words.\n\nWe're going to make use of SWC (Speedy Web Compiler) to speed up the Docusaurus build. To quote the SWC docs:\n\n> SWC can be used for both compilation and bundling. For compilation, it takes JavaScript / TypeScript files using modern JavaScript features and outputs valid code that is supported by all major browsers.\n>\n> 🏎 SWC is 20x faster than Babel on a single thread and 70x faster on four cores.\n\nWe like faster! Interestingly, the Docusaurus site itself is built with SWC and has been since 19th March 2022. You can see Josh Cena's PR implementing SWC for Docusaurus here.\n\nHowever, by default, Docusaurus is built using Babel. This post will demonstrate how to make the switch. In fact as part of the PR that implements this post, this blog (also platformed on Docusaurus) will migrate from Babel to SWC. See the blog post PR here.\n\nGoodbye babel-loader, hello swc-loader\n\nDocusaurus is bundled using webpack. As a consequence, we need a tool to bridge the gap between webpack and SWC. That tool is the swc-loader.\n\nBy default, the Docusaurus build uses Babel for its build. Let's add swc-loader and @swc/core to the project:\n\nWith those in place, we're now able to tweak our the webpack config in docusaurus.config.js to use swc-loader instead of babel-loader:\n\nBuild times\n\nWith this in place, we're done. We can now run yarn build and see the difference in build times. On GitHub actions (where I build my blog), the build time for the blog site went from around 6 minutes to around 4 minutes. It's somewhat variable, but there's a definite improvement, and every little helps!",
  "title": "Faster Docusaurus builds with swc-loader"
}