Powerful Rust in JavaScript, with SWC.

At Next.js Conf on October 26, 2021, Next.js v12.0.0 announced a new compiler in Rust SWC, which is ~3x faster in Fast Refresh and ~5x faster in builds.

Faster builds and faster update with Rust compiler

We want to make every Next.js app faster for production and get instant feedback in local development. Next.js 12 includes a new Rust compiler that takes advantage of native compilation.

The Rust compiler is built on SWC (Speedy Web Compiler), an open platform for the next generation of fast tools. Optimized bundling and compilation with ~3x faster in-place refresh and ~5x faster builds for production. Other improvements and features include:

  • Further speed improvements for large codebases: We’ve validated the Rust compiler with some of the largest Next.js codebases in the world.
  • Improved observability into performance: Next.js now outputs Fast Refresh timing in the console for both client and server compilation, including the number of modules and files compiled.
  • Underlying webpack improvements: We’ve made numerous improvements to webpack, including optimizing Fast Refresh and making on-demand entries more reliable.

Compilation using Rust is 17x faster than Babel and enabled by default using Next.js 12, replacing transforming JavaScript and TypeScript files. This meant we had to port the Babel transformations in Next.js to Rust, including a brand new CSS parser in Rust used to implement the styled-jsx transform.

What is SWC?

SWC is an extensible Rust-based platform for the next generation of rapid development tools. It is used by tools like Next.js, Parcel, and Deno, as well as companies like Vercel, ByteDance, Tencent, Shopify, and more.

SWC can be used for both compilation and bundling. For compilation, it uses JavaScript/TypeScript files using modern JavaScript features and generates valid code that is supported by all major browsers.

SWC is 20x faster than Babel on a single thread and 70x faster on four cores.

And in the tests, how performant is it?
In the tests we will use jest (https://jestjs.io/) with TypeScript, in the codeeducation-ddd-typescript repository, we have 2 packages installed to use in the transform of jest.config.ts, ts-jest and @swc/jest.

Hardware Settings

AMD Ryzen 7 5700G
Microsoft Windows 11 Pro
32,0 GB RAM
SSD 1TB

ts.config.ts configuration

export default {
...
transform: {
// "^.+\.(t|j)sx?$": 'ts-jest',
"^.+\.(t|j)sx?$": ["@swc/jest"],
},
...
};

Tests steps

npm install

Using ts-jest

npm test — — clearCachenpm test (5x)

Using @swc/jest

npm test — — clearCachenpm test (5x)

Results

|  Runs   | ts-jest | @swc/jest |  Gain  |
| 1º test | 7.645 | 2.415 | 68.41% |
| 2º test | 6.399 | 1.962 | 69.34% |
| 3º test | 6.377 | 1.975 | 69.03% |
| 4º test | 6.406 | 1.959 | 69.42% |
| 5º test | 6.479 | 1.937 | 70.10% |
| Avg | 6.661 | 2.050 | 69.23% |

Conclusion

We noticed that Rust has a great importance for compilers, I hope that SWC is the beginning of many compilers that will appear, using jest with swc plus coverage, you have an absurd productivity with tests.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Newerton Vargas de Araujo

Newerton Vargas de Araujo

Software Enginner | Next.js | NestJs | React Native | Flutter | DevOps