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

SWC: Rust based compiler to replace babel #1451

Merged
merged 6 commits into from
May 10, 2022
Merged

SWC: Rust based compiler to replace babel #1451

merged 6 commits into from
May 10, 2022

Conversation

paales
Copy link
Member

@paales paales commented May 9, 2022

With this PR, GraphCommerce will be using the Rust based SWC compiler that will replace babel. With this GraphCommerce is embracing that Rust is the future of javascript.

SWC was released as part of Next.js v12 and has been stabilizing in the last few months. With the v12.1.1 release it came with experimental support for emotion css, so it is time to switch over.

With this PR we're also doing away with any dependencies on babel-plugin-macros which isn't really maintained anymore.
This means we can't use @lingui/macro anymore. This is a bit of a downside, but we found upgrading not too difficult and we migrated the complete codebase in a few hours. And we have to migrate at some point anyways.

We are however very excited about the results of the SWC compiler!

Dev timings:

next dev + babel: 71,4s seconds
next dev + swc: 22,7 seconds

On a warm start (after next dev has run once) it is even faster: 6,1 seconds

Build times:

next build + babel: 8m 12s
next build + swc: 4m 57s

Modern preset:

We're using a little trick to also force next.js/SWC into a 'modern' mode, this means we don't compile down to ES5, but down to a much more recent version:

Route Old size New size Diff
/ 272kB 259.0kB -13kB🔥
/_app 196kB 190.0kB -6kB🔥
/[...url] 290kB 276.0kB -14kB🔥

The above change isn't officially supported by next.js, but it seems to be working absolutely fine for us. You can apply the patch to your own project with the excellent patch-package

…i/macro / @lingui/core in preparation to move to swc.
@changeset-bot
Copy link

changeset-bot bot commented May 9, 2022

🦋 Changeset detected

Latest commit: c305cdf

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 49 packages
Name Type
@graphcommerce/magento-cart-payment-method Patch
@graphcommerce/mollie-magento-payment Patch
@graphcommerce/react-hook-form Patch
@graphcommerce/eslint-config-pwa Patch
@graphcommerce/graphql-codegen-near-operation-file Patch
@graphcommerce/typescript-config-pwa Patch
@graphcommerce/docs Patch
@graphcommerce/magento-graphcms Minor
@graphcommerce/ecommerce-ui Patch
@graphcommerce/framer-scroller Patch
@graphcommerce/lingui-next Patch
@graphcommerce/magento-cart Patch
@graphcommerce/magento-cart-billing-address Patch
@graphcommerce/magento-cart-checkout Patch
@graphcommerce/magento-cart-coupon Patch
@graphcommerce/magento-cart-email Patch
@graphcommerce/magento-cart-items Patch
@graphcommerce/magento-cart-pickup Patch
@graphcommerce/magento-cart-shipping-address Patch
@graphcommerce/magento-cart-shipping-method Patch
@graphcommerce/magento-category Patch
@graphcommerce/magento-cms Patch
@graphcommerce/magento-customer Patch
@graphcommerce/magento-customer-account Patch
@graphcommerce/magento-customer-order Patch
@graphcommerce/magento-newsletter Patch
@graphcommerce/magento-pagebuilder Patch
@graphcommerce/magento-payment-braintree Patch
@graphcommerce/magento-payment-included Patch
@graphcommerce/magento-payment-klarna Patch
@graphcommerce/magento-product Patch
@graphcommerce/magento-product-bundle Patch
@graphcommerce/magento-product-configurable Patch
@graphcommerce/magento-product-downloadable Patch
@graphcommerce/magento-product-grouped Patch
@graphcommerce/magento-product-simple Patch
@graphcommerce/magento-product-virtual Patch
@graphcommerce/magento-review Patch
@graphcommerce/magento-search Patch
@graphcommerce/magento-store Patch
@graphcommerce/magento-wishlist Patch
@graphcommerce/next-ui Patch
@graphcommerce/graphql Patch
@graphcommerce/framer-scroller-example Patch
@graphcommerce/framer-next-pages-example Patch
@graphcommerce/graphcms-ui Patch
@graphcommerce/image-example Patch
@graphcommerce/googlerecaptcha Patch
@graphcommerce/magento-graphql Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel
Copy link

vercel bot commented May 9, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
graphcommerce ✅ Ready (Inspect) Visit Preview May 10, 2022 at 8:40AM (UTC)

@github-actions

This comment was marked as outdated.

@github-actions

This comment was marked as outdated.

@github-actions

This comment was marked as duplicate.

@paales paales changed the title swc compiler SWC: Rust based compiler to replace babel May 9, 2022
@github-actions

This comment was marked as outdated.

docs/framework/translations.md Outdated Show resolved Hide resolved
docs/framework/translations.md Outdated Show resolved Hide resolved
docs/framework/translations.md Outdated Show resolved Hide resolved
@github-actions
Copy link
Contributor

Page Size old Size new Size diff First load old First load new First load diff
/ 2.3kB 1.6kB -0.7kB 272kB 259.0kB -13kB🔥
/_app 196kB 190.0kB -6kB🔥
/[...url] 4.8kB 3.8kB -1.0kB 290kB 276.0kB -14kB🔥
/404 5.0kB 4.5kB -0.5kB 260kB 251.0kB -9kB🔥
/account 12.4kB 15.7kB +3.3kB⚠️ 244kB 235.0kB -9kB🔥
/account/addresses 8.0kB 8.4kB 0.4kB 250kB 240.0kB -10kB🔥
/account/addresses/add 4.6kB 3.6kB -1.0kB 263kB 254.0kB -9kB🔥
/account/addresses/edit 4.8kB 5.7kB 0.9kB 266kB 256.0kB -10kB🔥
/account/authentication 5.0kB 3.5kB -1.5kB 262kB 253.0kB -9kB🔥
/account/contact 5.3kB 3.6kB -1.7kB 262kB 253.0kB -9kB🔥
/account/forgot-password 5.5kB 7.1kB +1.6kB⚠️ 257kB 248.0kB -9kB🔥
/account/name 6.8kB 5.0kB -1.8kB 264kB 254.0kB -10kB🔥
/account/orders 5.4kB 5.3kB -0.1kB 234kB 224.0kB -10kB🔥
/account/orders/view 5.3kB 5.4kB 0.1kB 234kB 224.0kB -10kB🔥
/account/reviews 8.7kB 7.9kB -0.8kB 229kB 220.0kB -9kB🔥
/account/reviews/add 8.1kB 6.4kB -1.7kB 263kB 254.0kB -9kB🔥
/account/signin 7.4kB 6.2kB -1.2kB 274kB 264.0kB -10kB🔥
/api/graphql 196kB 190.0kB -6kB🔥
/api/preview 196kB 190.0kB -6kB🔥
/blog 0.4kB 0.4kB 247kB 237.0kB -10kB🔥
/blog/[url] 1.0kB 3.2kB +2.2kB⚠️ 274kB 260.0kB -14kB🔥
/blog/page/[page] 0.3kB 0.3kB 247kB 237.0kB -10kB🔥
/blog/tagged/[url] 1.0kB 3.2kB +2.2kB⚠️ 274kB 260.0kB -14kB🔥
/cart 8.3kB 7.5kB -0.8kB 279kB 268.0kB -11kB🔥
/checkout 11.7kB 10.6kB -1.1kB 282kB 270.0kB -12kB🔥
/checkout/edit/billing-address 4.1kB 6.0kB +1.9kB⚠️ 263kB 253.0kB -10kB🔥
/checkout/payment 87.3kB 85.5kB -1.8kB 363kB 350.0kB -13kB🔥
/checkout/success 8.7kB 8.1kB -0.6kB 285kB 274.0kB -11kB🔥
/checkout/terms/[url] 1.1kB 1.1kB 219kB 211.0kB -8kB🔥
/customer/account/createPassword 5.6kB 7.2kB +1.6kB⚠️ 257kB 248.0kB -9kB🔥
/modal/[...url] 5.3kB 4.6kB -0.7kB 249kB 238.0kB -11kB🔥
/page/[url] 2.3kB 1.6kB -0.7kB 271kB 258.0kB -13kB🔥
/product/[url] 1.7kB 1.4kB -0.3kB 311kB 295.0kB -16kB🔥
/product/bundle/[url] 1.5kB 1.2kB -0.3kB 311kB 294.0kB -17kB🔥
/product/configurable/[url] 6.5kB 7.9kB +1.4kB⚠️ 313kB 296.0kB -17kB🔥
/product/downloadable/[url] 1.7kB 1.4kB -0.3kB 311kB 295.0kB -16kB🔥
/product/grouped/[url] 1.9kB 1.6kB -0.3kB 311kB 295.0kB -16kB🔥
/product/virtual/[url] 1.6kB 1.3kB -0.3kB 311kB 294.0kB -17kB🔥
/search/[[...url]] 6.6kB 5.6kB -1.0kB 296kB 284.0kB -12kB🔥
/service/[[...url]] 5.2kB 4.5kB -0.7kB 249kB 238.0kB -11kB🔥
/switch-stores 5.8kB 5.6kB -0.2kB 227kB 218.0kB -9kB🔥
/test/[[...url]] 2.3kB 2.1kB -0.2kB 245kB 235.0kB -10kB🔥
/test/buttons 8.2kB 10.5kB +2.3kB⚠️ 214kB 206.0kB -8kB🔥
/test/icons 5.6kB 7.9kB +2.3kB⚠️ 217kB 210.0kB -7kB🔥
/test/minimal-page-shell-subheader/[[...url]] 7.6kB 9.7kB +2.1kB⚠️ 253kB 244.0kB -9kB🔥
/test/minimal-page-shell/[[...url]] 5.9kB 8.3kB +2.4kB⚠️ 221kB 214.0kB -7kB🔥
/test/sheet 4.0kB 3.6kB -0.4kB 229kB 221.0kB -8kB🔥
/test/slider 0.8kB 0.8kB 247kB 237.0kB -10kB🔥
/test/typography 5.1kB 7.6kB +2.5kB⚠️ 218kB 210.0kB -8kB🔥
/test/usebacklink/[[...url]] 4.5kB 7.0kB +2.5kB⚠️ 210kB 203.0kB -7kB🔥
/wishlist 10.0kB 9.4kB -0.6kB 271kB 261.0kB -10kB🔥

@paales paales merged commit 6648a09 into main May 10, 2022
@paales paales deleted the feature/swc branch May 10, 2022 09:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants