How do you polyfill / ponyfill?

[matzeeable]

Hey webpack community!

I am doing some research how we could do polyfilling / ponyfilling more effectively with babel-preset-env's option useBuiltins=usage.

I thought about a cacheGroup that collects all polyfills in an own bundle file, for example:

"vendor-polyfills": {
  test: /node_modules\/(core-js|whatwg-fetch)/,
  chunks: "initial",
  enforce: true
},

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 😊

[alexander-akait]

/cc @chenxsan I think will be great to docs it, what do you think?

[chenxsan]

I don't know how to do it either :)

[sokra]

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).

useBuiltins=usage will already include only polyfills you need based on your current browserslist.

---

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";

// webpack.config.js
// ...
module.rules: [
{
  test: /\.js$/,
  include: [ path.resolve(__dirname, "src") ],
  oneOf: [{
    resourceQuery: "?legacy",
    loader: "babel-loader",
    options: {
      useBuiltIns: "entry".
      browserslistEnv: "legacy"
    }
  }, {
    loader: "babel-loader",
    options: {
      useBuiltIns: "entry".
      browserslistEnv: "modern"
    }
  }]
}
]

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"
}]

[alexander-akait]

/cc @chenxsan Maybe we can document it?

[chenxsan]

I'll find time to see where to document it.

[depoulo]

Often people just create two webpack config and compile twice, but it's also possible to use layers for that

Ok but how am I supposed to set targets by layer? To me it looks like in the above approach, you'd have to set target to something compatible with the legacy browser, leaving you with an unneccessary big webpack runtime in the code targeting "modern" browsers, for the sake of avoiding two independent builds.

[matzeeable]

@depoulo Have you found a solution for this?

[depoulo]

Yes. We stopped supporting legacy browsers, and now deliver the same code to everyone.