feat(create-rspack): better default browserslist target

[vegerot]

Summary: The current browserslist default has two problems

1. It only covers 31% of users
2. The versions are hardcoded, so needs to be manually updated

This commit changes the default browserslist to dynamically update as browser usage changes, and moves coverage from 31% to 91%

[netlify]

✅ Deploy Preview for rspack canceled.

Built without sensitive environment variables

Name	Link
🔨 Latest commit	be35bb5
🔍 Latest deploy log	https://app.netlify.com/sites/rspack/deploys/681cfb99afb89d0008798311

[codspeed-hq]

CodSpeed Performance Report

Merging #10290 will not alter performance

_{Comparing vegerot:pr10290 (be35bb5) with main (2e75d4f)}

🎉 Hooray! codspeed-node just leveled up to 4.0.1!

A heads-up, this is a breaking change and it might affect your current performance baseline a bit. But here's the exciting part - it's packed with new, cool features and promises improved result stability 🥳!
Curious about what's new? Visit our releases page to delve into all the awesome details about this new version.

Summary

✅ 11 untouched benchmarks

[chenjiahan]

Sorry, this was not an expected change, here are the reasons:

1. "It only covers 31% of users" is not true, browsersl.ist calculates incomplete coverage. For example, chrome >= 87 actually covers ChromeAndroid >= 87 (44.7%), which browsersl.ist ignores.

2. Rspack's current default browserslist is the same as Rsbuild and Vite, which is in line with common practice in the community.

[vegerot]

1. Fair enough. You're right that the current has more coverage.
2. I disagree. Just because Vite does it doesn't mean it's good.
   • All of the browsers Vite targets were released in 2020. Vite picked the 2020 versions back in 2021 because that's what browserslist told them were the most modern and widely supported browsers at the time
     • Vite claims they picked these because they support ES Modules, however that's not the whole story. ES Modules were supported for years (Chrome 2016, Safari 2017, Firefox 2018) before Vite's target (2020). Vite picked their target by also requiring it to be the most modern.
     • slightly related

       Before the patch I sent, it seems that Vite's _only_ requirement was supporting ESM, which we can see by comparing their previous browserslist to ESM support . (off-topic: it's funny that commit is `refactor!:`. How can refactors be breaking changes 😁?
     • Using the same query Vite did back in 2021 today reveals we'd want to support back to Chrome 109, Safari 15.6, and Firefox 128
   • There have been many new web features released that are now widely available. Ignoring these new features means larger bundles, slower code execution, and worse debuggability for the vast majority of our users.

tl;dr: @chenjiahan I understand wanting to be conservative with our default browser target, but do not think that Vite did anything more than just use the most modern, widely-supported browsers at the time. Sticking with five-year old browsers leaves performance on the table for the vast majority of our users. This PR proposes a way that we can continuously stay with the most widely supported browsers while also introducing new features as they become widely available.

[vegerot]

btw, while doing research for my last post I discovered Vite will probably make the same change too 😁 vitejs/vite#20007

[chenjiahan]

Thanks for the detailed introduction, I agree that it makes sense to preset a dynamic range in the Rspack templates.

I noticed that the default value of browserslist is "> 0.5%, last 2 versions, Firefox ESR, not dead", while this PR introduces a different order of values ​​(e.g. Firefox ESR is at the end). Is this intentional?

[vegerot]

Is this intentional?

No 🙂

[chenjiahan]

LGTM 👍 Thank you

[vegerot]

@chenjiahan should we make similar patches for Rsbuild and Modern.js?

[chenjiahan]

It's a breaking change for Rsbuild so I prefer to update the value in major release.

[vegerot]

@chenjiahan makes sense. Are we already working on a major release in a next branch or something that I could add the patch to?

(if we really want to avoid a breaking change, we could update the create template to explicitly set the browser target. It'd be a minor update, but would make the template less clean)

[chenjiahan]

Yeah keep Rsbuild's templates clean is quite import as it's an zero config build tool.

We haven't have a clear plan for Rsbuild's next major version. Maybe later in the year we'll start thinking about it.

[vegerot]

What about Modern.js? We already provide a .browerslistrc in the template so we can change that.

I see Modern.js will drop support for Node 16 next month. When will Rsbuild drop support?

[chenjiahan]

For Morern.js, would you like to create an issue in the Modern js repo?

Rsbuild will drop Node 16 support in Rsbuild 1.5, which should be released in Q3 2025.

[vegerot]

@chenjiahan let's discuss the Rsbuild change in web-infra-dev/rsbuild#5235 and the Modern.js patch in web-infra-dev/modern.js#7147