Open gaearon opened 2 years ago
Hi, we have an experimental config to make the transpilation more specific to the browser requirements in the latest canary of Next.js it can be enabled with:
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
experimental: {
legacyBrowsers: false,
browsersListForSwc: true
}
}
module.exports = nextConfig
The browserslist used with the above config can be seen here https://github.com/vercel/next.js/blob/81850eb295c59446b0e0b003356844c7c69cf38c/packages/next/shared/lib/constants.ts#L29
Related RFC https://github.com/vercel/next.js/discussions/33227
Awesome, thanks! I'll try this as a stopgap. It's still pretty bad the output is so bloated/duplicated for the older browsers though. Do you think this is worth fixing on its own? Sharing the helpers in a single module like Babel does would go a long way.
To clarify, some of the patterns I've quotes are repeated many times throughout the bundle. Not sure if it's per class, per module, or per await/spread usage.
Yeah there's definitely room for improvement here separate of the features being transpiled which we can investigate!
For the approach in https://github.com/vercel/next.js/issues/37142#issuecomment-1135206523, is the browsers list configurable?
Yeah the above config will honor a custom browserslist
config if present instead of the default provided.
If I use the config you've suggested, the output is much better!
Some repeated unfortunate patterns which I presume are from module system:
("function" === typeof t.default ||
("object" === typeof t.default && null !== t.default)) &&
"undefined" === typeof t.default.__esModule &&
(Object.defineProperty(t.default, "__esModule", { value: !0 }),
Object.assign(t.default, t),
(e.exports = t.default));
},
var n = (function (e) {
if (e && e.__esModule) return e;
var t = {};
if (null != e)
for (var r in e)
if (Object.prototype.hasOwnProperty.call(e, r)) {
var n =
Object.defineProperty && Object.getOwnPropertyDescriptor
? Object.getOwnPropertyDescriptor(e, r)
: {};
n.get || n.set ? Object.defineProperty(t, r, n) : (t[r] = e[r]);
}
return (t.default = e),
The duplication in helpers noticed here should be fixed by https://github.com/vercel/next.js/pull/37150
Why we can't just manually add .swcrc to configure browsersList, loose mode etc as we wish? SWC by default transpiles to some ancient ES5. E.g. template literals have Object.freeze in their initialization. In projects with styled-components it slows down code.
like @ku8ar i also would like to add an .swcrc to turn on topLevelAwait using custom babel config i can't get that to work
Per @ku8ar 's comment, wouldn't it be equally as practical to kill two birds with one stone here and allow the custom browserlist
through the .swcrc
...?
For those lurking: Support for the experimental config mentioned in this comment has been released in stable 12.2.0!
What is the current status of this issue? Are there more optimizations needed for older browsers or was that fixed here https://github.com/vercel/next.js/issues/37142#issuecomment-1135473389?
Verify canary release
Provide environment information
What browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response
Describe the Bug
Even an empty Next.js project, when compiled, seems to include a bunch of inefficiently transpiled code.
Here is a prettified
main.js
from an empty Next.js project: https://gist.github.com/gaearon/6ce1f86577a55a738f2319fcdaa90892Some parts that look particularly suspicious:
(the one above is repeated many many times)
I presume that some of this is classes, some is destructuring, some is module system, and some is async/await. I think it would be great if:
Expected Behavior
No repetitive and inefficient compilation artifacts in the default Next.js production bundle.
To Reproduce
Create a new Next.js project and build it.