Add support for browserslist and legacyBrowsers experimental option #36584

timneutkens · 2022-04-30T10:51:23Z

Implements the first part of #33227

Applies browserslist to JS transforms when experimental.browsersListForSwc is enabled.
You don't have to use browserslist, there's also legacyBrowsers: false which will be the new default in Next.js 13. See RFC: Change default JS/CSS output to target modern browsers #33227 for which browsers and why. legacyBrowsers requires browsersListForSwc: true to function until it is the default.

module.exports = {
  experimental: {
    legacyBrowsers: false,
    browsersListForSwc: true,
  }
}

I only implemented the JS part of the RFC, the CSS part should be handled in a follow-up PR.

Bug

Related issues linked using fixes #number
Integration tests added
Errors have helpful link attached, see contributing.md

Feature

Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
Related issues linked using fixes #number
Integration tests added
Documentation added
Telemetry added. In case of a feature if it's used or not.
Errors have helpful link attached, see contributing.md

Documentation / Examples

Make sure the linting passes by running yarn lint

Implements vercel#33227 - Applies browserslist to JS transforms - You don't have to use browserslist, there's also `legacyBrowsers: false` which will be the new default in Next.js 13. See vercel#33227 for which browsers and why. ``` module.exports = { experimental: { legacyBrowsers: false } } ```

ijjk · 2022-04-30T11:17:35Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	timneutkens/next.js add/legacybrowsers-rfc	Change
buildDuration	15.7s	15.7s	-63ms
buildDurationCached	6.5s	6.6s	⚠️ +104ms
nodeModulesSize	478 MB	478 MB	⚠️ +2.78 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	timneutkens/next.js add/legacybrowsers-rfc	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.773	3.748	-0.02
/ avg req/sec	662.63	667	+4.37
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.201	1.179	-0.02
/error-in-render avg req/sec	2081.7	2120.92	+39.22

Client Bundles (main, webpack)

	vercel/next.js canary	timneutkens/next.js add/legacybrowsers-rfc	Change
925.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	28.7 kB	28.7 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	72.4 kB	72.4 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	timneutkens/next.js add/legacybrowsers-rfc	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	timneutkens/next.js add/legacybrowsers-rfc	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	193 B	193 B	✓
amp-HASH.js gzip	308 B	308 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	2.7 kB	2.7 kB	✓
head-HASH.js gzip	359 B	359 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.71 kB	5.71 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.65 kB	2.65 kB	✓
routerDirect..HASH.js gzip	320 B	320 B	✓
script-HASH.js gzip	391 B	391 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	15.9 kB	15.9 kB	✓

Client Build Manifests

	vercel/next.js canary	timneutkens/next.js add/legacybrowsers-rfc	Change
_buildManifest.js gzip	458 B	458 B	✓
Overall change	458 B	458 B	✓

Rendered Page Sizes

	vercel/next.js canary	timneutkens/next.js add/legacybrowsers-rfc	Change
index.html gzip	532 B	532 B	✓
link.html gzip	544 B	544 B	✓
withRouter.html gzip	527 B	527 B	✓
Overall change	1.6 kB	1.6 kB	✓

Default Build with SWC (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	timneutkens/next.js add/legacybrowsers-rfc	Change
buildDuration	18.1s	18.4s	⚠️ +287ms
buildDurationCached	6.5s	6.5s	⚠️ +55ms
nodeModulesSize	478 MB	478 MB	⚠️ +2.78 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	timneutkens/next.js add/legacybrowsers-rfc	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.755	3.748	-0.01
/ avg req/sec	665.77	667.06	+1.29
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.184	1.196	⚠️ +0.01
/error-in-render avg req/sec	2111.35	2090.6	⚠️ -20.75

Client Bundles (main, webpack)

	vercel/next.js canary	timneutkens/next.js add/legacybrowsers-rfc	Change
925.HASH.js gzip	178 B	178 B	✓
framework-HASH.js gzip	42.7 kB	42.7 kB	✓
main-HASH.js gzip	29.2 kB	29.2 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	73.5 kB	73.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	timneutkens/next.js add/legacybrowsers-rfc	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	timneutkens/next.js add/legacybrowsers-rfc	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	179 B	179 B	✓
amp-HASH.js gzip	311 B	311 B	✓
css-HASH.js gzip	324 B	324 B	✓
dynamic-HASH.js gzip	2.89 kB	2.89 kB	✓
head-HASH.js gzip	357 B	357 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.8 kB	5.8 kB	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	2.77 kB	2.77 kB	✓
routerDirect..HASH.js gzip	322 B	322 B	✓
script-HASH.js gzip	392 B	392 B	✓
withRouter-HASH.js gzip	317 B	317 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16.3 kB	16.3 kB	✓

Client Build Manifests

	vercel/next.js canary	timneutkens/next.js add/legacybrowsers-rfc	Change
_buildManifest.js gzip	457 B	457 B	✓
Overall change	457 B	457 B	✓

Rendered Page Sizes

	vercel/next.js canary	timneutkens/next.js add/legacybrowsers-rfc	Change
index.html gzip	532 B	532 B	✓
link.html gzip	547 B	547 B	✓
withRouter.html gzip	529 B	529 B	✓
Overall change	1.61 kB	1.61 kB	✓

Commit: 79a2da5

SukkaW

Isn't it confusing that while swc / babel does transform the modern syntax without including the corresponding polyfill?

E.g. If I set my browserslists to Chrome > 64 and use Promise.allSettled in my code. I would be expecting the corresponding polyfill should be included because Promise.allSettled is only supported since Chrome 76.

timneutkens · 2022-04-30T14:55:51Z

Isn't it confusing that while swc / babel does transform the modern syntax without including the corresponding polyfill?

E.g. If I set my browserslists to Chrome > 64 and use Promise.allSettled in my code. I would be expecting the corresponding polyfill should be included because Promise.allSettled is only supported since Chrome 76.

Next.js has 2 sets of polyfills that are loaded which are based on module/nomodule support. In case of Promise.allSettled I think it should be added to next-polyfill-module as it's a common feature.

SukkaW · 2022-04-30T15:04:41Z

Isn't it confusing that while swc / babel does transform the modern syntax without including the corresponding polyfill?
E.g. If I set my browserslists to Chrome > 64 and use Promise.allSettled in my code. I would be expecting the corresponding polyfill should be included because Promise.allSettled is only supported since Chrome 76.

Next.js has 2 sets of polyfills that are loaded which are based on module/nomodule support. In case of Promise.allSettled I think it should be added to next-polyfill-module as it's a common feature.

IMHO it is a really bad idea. With the ECMAScript rolling out a new spec every year, the size of the next-polyfill-module will continuously increase. And how can you tell whether an ECMAScript feature is commonly used by a Next.js user or not? E.g. I use Object.fromEntries in my project but Next.js refuses to add it to the polyfill because it will impact the size of the next-polyfill-module (And it really confuses people as they believe Next.js is full ES2019 compatible. And that's why I create #36426, an Object.fromEntries polyfill within 122 bytes).

And what happened to those who set browserlists to chrome > 100? Maybe they don't want any polyfill and transformation at all, maybe they are just prototyping an idea with SSG/SSR, but they still need to include next-plyfill-module in their main bundle.

timneutkens · 2022-04-30T19:51:41Z

@SukkaW the polyfill bundle is not the subject of the RFC #33227, the RFC only covers changing the defaults for transforming JS/CSS and not the polyfilling behavior, hence why it's not covered in this PR. Feel free to open a new RFC to talk about changing the defaults for polyfilling with the points mentioned. E.g. a RFC to change polyfilling based on the browserslist configuration could be considered a way to go after these changes land. There's a bunch of historical context / reasons why we went with the module/nomodule polyfill bundles approach over having Babel inject core-js polyfills. For example that it actually reduced bundle size for all applications when it was introduced so dismissing it as "a really bad idea" is not really constructive. Here's the data on size impact for all apps by default: #10212.

… is switched

SukkaW · 2022-04-30T23:37:35Z

For example that it actually reduced bundle size for all applications when it was introduced so dismissing it as "a really bad idea" is not really constructive.

The reason behind the final bundle size reduction is because it is not how core-js works. core-js not only provides a polyfill for the unsupported features but also fixes bugs for modern browsers' wrong implementation.

For instance, core-js provided a workaround for a critical bug about Array.prototype.reduce introduced in Chrome 80-82: https://github.com/zloirock/core-js/blob/ce52fdc735c5c809c9e85b2072f92d41b5a3885a/packages/core-js/modules/es.array.reduce.js

And another example, core-js provides a workaround for a critical bug about Array.prototype.reverse introduced in Safari 12:
https://github.com/zloirock/core-js/blob/fcbc2c878535b277f840997ab8ee819efd677888/packages/core-js/modules/es.array.reverse.js

And another example, core-js provides a workaround for a wrong implementation of Reflect.set on Edge 17-18: https://github.com/zloirock/core-js/blob/191151573225fac474b4ebd7c22acc0588505d34/packages/core-js/modules/es.reflect.set.js#L38-L45

I will post a full RFC later.

Per your request, a full RFC about polyfill behavior has been posted here: #36601

test/e2e/browserslist/browserslist.test.ts

…wsers-rfc

test/e2e/browserslist/legacybrowsers-false.test.ts

Co-authored-by: JJ Kasper <jj@jjsweb.site>

styfle

Should we add docs to explain how to configure this?

timneutkens requested review from ijjk, shuding, padmaia and huozhi as code owners April 30, 2022 10:51

ijjk added created-by: Next.js team PRs by the Next.js team type: next labels Apr 30, 2022

This comment was marked as outdated.

Sign in to view

Handle loading of extends

8790f3c

SukkaW reviewed Apr 30, 2022

View reviewed changes

Fix default of no custom browserslist config

e0e74f7

Fix test case for development and handle cache invalidation when flag…

375e068

… is switched

Remove next.config.js

92648fb

ijjk reviewed May 1, 2022

View reviewed changes

test/e2e/browserslist/browserslist.test.ts Outdated Show resolved Hide resolved

update fetch

cc3b557

timneutkens marked this pull request as draft May 1, 2022 20:11

timneutkens added 3 commits May 16, 2022 14:40

Merge branch 'canary' of github.com:vercel/next.js into add/legacybro…

c1e416d

…wsers-rfc

Make browsersList support with SWC experimental

3851ddf

Make browsersList support with SWC experimental

1e2b881

timneutkens marked this pull request as ready for review May 16, 2022 13:21

ijjk reviewed May 16, 2022

View reviewed changes

test/e2e/browserslist/legacybrowsers-false.test.ts Outdated Show resolved Hide resolved

Update test/e2e/browserslist/legacybrowsers-false.test.ts

c6eeb26

Co-authored-by: JJ Kasper <jj@jjsweb.site>

ijjk approved these changes May 17, 2022

View reviewed changes

Merge branch 'canary' into add/legacybrowsers-rfc

79a2da5

kodiakhq bot merged commit fe3d6b7 into vercel:canary May 17, 2022

styfle reviewed May 18, 2022

View reviewed changes

leerob mentioned this pull request May 24, 2022

Decrease JS by targeting modern browsers only. leerob/leerob.io#482

Merged

balazsorban44 mentioned this pull request May 31, 2022

TypeScript Target Compiler Option is Silently Ignored #37271

Closed

1 task

github-actions bot locked as resolved and limited conversation to collaborators Jun 18, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for browserslist and legacyBrowsers experimental option #36584

Add support for browserslist and legacyBrowsers experimental option #36584

timneutkens commented Apr 30, 2022 •

edited

This comment was marked as outdated.

ijjk commented Apr 30, 2022 •

edited

SukkaW left a comment •

edited

timneutkens commented Apr 30, 2022

SukkaW commented Apr 30, 2022 •

edited

timneutkens commented Apr 30, 2022 •

edited

SukkaW commented Apr 30, 2022 •

edited

styfle left a comment

Add support for browserslist and legacyBrowsers experimental option #36584

Add support for browserslist and legacyBrowsers experimental option #36584

Conversation

timneutkens commented Apr 30, 2022 • edited

Bug

Feature

Documentation / Examples

This comment was marked as outdated.

ijjk commented Apr 30, 2022 • edited

Stats from current PR

SukkaW left a comment • edited

Choose a reason for hiding this comment

timneutkens commented Apr 30, 2022

SukkaW commented Apr 30, 2022 • edited

timneutkens commented Apr 30, 2022 • edited

SukkaW commented Apr 30, 2022 • edited

styfle left a comment

Choose a reason for hiding this comment

timneutkens commented Apr 30, 2022 •

edited

ijjk commented Apr 30, 2022 •

edited

SukkaW left a comment •

edited

SukkaW commented Apr 30, 2022 •

edited

timneutkens commented Apr 30, 2022 •

edited

SukkaW commented Apr 30, 2022 •

edited