feat!(create): upgrade default browser targets

[vegerot]

See discussion in web-infra-dev/rspack#10290 for info

[changeset-bot]

⚠️ No Changeset found

Latest commit: 1582248

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[netlify]

✅ Deploy Preview for modernjs-byted ready!

Name	Link
🔨 Latest commit	1582248
🔍 Latest deploy log	https://app.netlify.com/sites/modernjs-byted/deploys/6823e44a7d8d2100085eaa47
😎 Deploy Preview	https://deploy-preview-7147--modernjs-byted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 77 (🟢 up 1 from production) Accessibility: 90 (no change from production) Best Practices: 100 (no change from production) SEO: 91 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[chenjiahan]

I think the default values ​​of browserslist provided by Modern.js and Rspack should be different. Modern.js should consider the compatibility requirements of enterprise users such as ByteDance.

@zllkjc might be able to help evaluate the current goals of Modern.js for browser compatibility.

[vegerot]

I disagree in two places

1. Modern.js by default shouldn't be paranoid about enterprise compatibility.
2. The proposed defaults are sensible even for ByteDance projects like TikTok.

---

1. Modern.js should pick the sensible defaults that work for the vast majority of people. We make it easy for people to customize the defaults to their own liking.
2. The current defaults are targeting browsers over nine years old. According to browser usage statistics, this covers 99.99% of current internet users. This is plenty, even for TikTok. We can support 99.999% of current internet users by adding support for IE9. Should we do that too?

Also, my earlier comment about Vite is useful here web-infra-dev/rspack#10290 (comment)

[zllkjc]

Here's my opinion:

1. In Modern.js, I didn't get enough feedback or discussions about browserslist. Next.js seems to not be using dynamic browsers.

But I think we can consider using dynamic versions in Modern.js to get better performance. Or there might be other advantages ? I don't think coverage is an advantage of the dynamic version.

2. Inside ByteDance, I think we can't do that. What we need to ensure first is the stability of our business. Not all projects have the same user base as TikTok, and the users targeted by different projects are also different. For example, Volcengine may target more users who use older versions of browsers, while dynamic versions may change the compatibility of the code without developers being aware of it.

[vegerot]

I think it's important to clarify my stance: I'm not claiming Modern.js should be on the bleeding edge and only support a tiny subset of browsers in order to get the newest features. I agree that the default should be conservative. Modern.js by default should only support features that are widely available and target browsers that are ubiquitous and go back years. The current defaults are stagnant on the verge of paranoia. Supporting browsers from 2016 (not devices from 2016, because those browsers were still updated for years; we're probably talking devices from 2012) goes against the philosophy of Modern.js.

The great thing about Modern.js is that it has good defaults, but gives users the ability to tweak things however they like with the great power of Rsbuild and Rspack. If some project needs to support IE9, they can customize their build to make that work. The vast vast majority of projects don't.

tl;dr: I agree that Modern.js should be conservative in its browser choice to support the widest range of users. But are we going too far?

next.js

My hypothesis is that Next.js did the same thing as Vite. Claim to be "modern" but actually just picked the most modern and widely supported browsers when it was released.

Even still, their defaults are much newer than ours.

Not all projects have the same user base

Exactly. That's why it's the goal of Modern.js to have good defaults and make it easy for users to customize it to their liking. Again, if we have to paranoidly support every use case should we make IE support default? The current default goes back to 2016. We're not disagreeing on whether or not Modern.js by default should support the most devices. 2016

dynamic versions may change the compatibility of the code without developers being aware of it.

This is a good counterpoint. I have a few thoughts:

1. This would only change when browserslist is updated.
2. Perhaps what would be best is to dynamically generate the templates to be widely supported when the project is created. That way new projects won't be obsolete as soon as they're created.
3. On the other hand, this would encourage these projects to stagnate and leave performance on the table when new features become widely supported. I still think the default should be to always support the most widely supported browsers. We could imagine a selling point of Modern.js to be "Modern.js helps keep your site modern". And we can continue to make it easy for devs to change the defaults to best suit their project.

[vegerot]

By the way, can we please acknowledge that the current behavior when devs decide not to use a .browserslistrc is already what I'm proposing?

[zllkjc]

Thank you for your explanation~

I agree with what you said, we should keep the template as modern as possible. But I always think stability is the most important thing. Once the template is created, unless the developer manually changes it, it shouldn't change its compatibility at any time.

Creating dynamic templates is a good suggestion, and it's more stable than using the dynamic version of Browsers. This can be applied in Modern.js, but in Bytedance, I need to do more research, and I can't give a conclusion now.

[vegerot]

Agreed!

New ByteDance projects by default can support widely available browsers. Again, we're talking about browsers that 99.5% of people use. If there's a new project that needs to support a ten-year old browser they can easily update the config to do that.