How do you polyfill / ponyfill? #13241
Replies: 3 comments 5 replies
-
/cc @chenxsan I think will be great to docs it, what do you think? |
Beta Was this translation helpful? Give feedback.
-
That won't work that way. If you omit a splitChunk chunk, the application won't load at all (it's will wait for all chunks to be there).
I guess something like this would be possible, but I haven't tried that: // entry.js
(async () => {
if(isLegacyBrowser()) await import("./polyfills?legacy");
else await import(/* webpackMode: "eager" */ "./polyfills");
await import(/* webpackMode: "eager" */ "./app");
})(); // polyfills.js
import "core-js";
import "regenerator-runtime";
But this would only handle polyfills and not transpiling... If you want to handle transpiling too, you have to compile your app twice in different modes. Often people just create two webpack config and compile twice, but it's also possible to use layers for that: // webpack.config.js
entry: {
modern: {
import: "./app",
layer: "modern"
},
legacy: {
import: "./app",
layer: "legacy"
},
},
module.rules: [
{
test: /\.js$/,
include: [ path.resolve(__dirname, "src") ],
oneOf: [{
issuerLayer: "legacy",
loader: "babel-loader",
options: {
useBuiltIns: "usage".
browserslistEnv: "legacy"
}
}, {
issuerLayer: "modern",
loader: "babel-loader",
options: {
useBuiltIns: "usage".
browserslistEnv: "modern"
}
}]
},
{
test: /\.css$/,
layer: "shared"
// best switch the layer to compile parts only once
// layer is inherited from parent otherwise
}
] or // entry.js
(async () => {
if(isLegacyBrowser()) await import("./polyfills?legacy");
else await import(/* webpackMode: "eager" */ "./polyfills");
await import(/* webpackMode: "eager" */ "./app");
})(); // webpack.config.js
module.rules: [{
resourceQuery: "?legacy",
layer: "legacy"
}] |
Beta Was this translation helpful? Give feedback.
-
Ok but how am I supposed to set |
Beta Was this translation helpful? Give feedback.
-
Hey webpack community!
I am doing some research how we could do polyfilling / ponyfilling more effectively with
babel-preset-env
's optionuseBuiltins=usage
.I thought about a
cacheGroup
that collects all polyfills in an own bundle file, for example:Now, I need to somehow load that file only when I detect a legacy browser. What condition could be used here, and how can I put the conditional require directly into the bundle (the HTML webpack plugin isn't an option because it is enqueued in a WordPress plugin)? Should I use another approach? Does something like a "Best practice" exist to use
useBuiltins=usage
with own chunk file?I also stumbled over
webpack-polyfill-injector
which looks promising. It has a very clever way how it injects missing functionalities. Unfortunately, it looks unmaintained.How do you handle this?
Regards,
Matthew 😊
Beta Was this translation helpful? Give feedback.
All reactions