Use SWC to Improve Your Build Speed by 30%

JavaScript evolves every year with new features, new syntaxes, and new function that we can use to make our lives easier. However, browsers need to be updated so they can run these codes. Since as a frontend developer, we cannot guarantee our codes would be run on the latest and greatest systems and browsers, we have tools that help convert most of our codes to codes that older browsers can understand.

For the longest time we have babel to do this for us and the idea is to provide the minimum browser versions and Babel automagically knows how much it needs to convert so these browsers understand. One of the biggest downsides is the speed. There are a lot of tricks in babel we can use like caching, adjusting browser versions, etc. Or there are other projects written from scratch meant to replace Babel once and for all.

SWC ​

SWC is tool written in Rust which by itself should already have better performance than Babel which is written in JavaScript.

To install SWC:

npm install @swc/core swc-loader -D

Like Babel, you will also need a .swcrc file:

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true
    },
    "transform": {
      "react": {
        "runtime": "automatic"
      }
    }
  }
}

My content looks like above since it’s for our React app written in TypeScript so we need to let SWC know it’s a TypeScript project and it is also a React project.

In your webpack.config.js where it’s resolving your js files:

{
  test: /\.(ts|tsx|js|jsx)$/,
  exclude: /(node_modules|scripts)/,
  use: {
    loader: 'swc-loader',
    options: {
      // Add your SWC options
    },
  },
},

And you are done. This should be a smooth and painless migration.

swc/Jest ​

Another way to improve your build time is to make the unit test faster. This is assuming you do have unit tests as part of the CI/CD process. I mean, I hope you do. Jest is a unit test framework for JavaScript that is very well maintained and keeps on getting new updates. One of the things we’ve noticed was with our scale and project size, Jest unit tests have been running slower and slower. We ran some benchmark using Node and noticed it took some time to build those tests and loading all of the React and MUI related packages. This is when we found Vitest. Using the power of Vite and Esbuild, it promised to be super quick. ANDDDD it didn’t for us for unknown reasons. We tested it out in 2 different frontend repos and the benchmarks weren’t too different from Jest. We were bumped and moved to the next shiny thing we saw.

swc has another package aiming for Jest. The migration from using babel-jest and ts-jest to swc/jest has been seamless.

To install:

npm install @swc/core @swc/jest -D

In your jest.config.js

module.exports = {
	transform: {
    '^.+\\.[jt]sx?$': ['@swc/jest'],
  },
	// Plus other options you have
}

This by average makes our CI/CD faster by 40%. Consider unit test step would run many times in branches, code merges, and deployments, this has saved us a lot of times.

Conclusion ​

It’s always very satisfying to make performance improvements especially for build times as that is something that developers feel every day. We have also tried Esbuild for like the experience with Vitest it didn’t improve as much as we thought.

Other tools we would love to try when the time is right includes Bunjs and Turbopack when they are stable enough and support module federations.

If you find this useful please share it on Twitter and let me know.