Do we need combine the transform-runtime and preset-env in an application? [closed]

Question

Question 1

I find that there are many unnecessary duplications in the (webpack) bundle (output)result, to be specific, they all are the helpers(like classCheck, objectSpread(due to the object-spread plugin).

So, I want to reduce the duplications. If it's a library, sure, I will use transform-runtime plugin(refer to runtime-corejs3) to do this. But now this is an application, so, what's the correct way to do this?

Therefor I'm getting confused because the transfrom-runtime plugin is recommended for library(and is for the whole reduction. i.e. core-js, regenerator and the helpers). But here I just want to reduce the helper duplications, not others duplications because that has been done by babel/env.

So here the question I want to ask/discuss is that is it necessary to reduce the helpers duplications in an application, if yes, and how?

Question 2

The other question is, core-js/modules/es.promise.js and core-js-pure/modules/es.promise.js are exactly the same code, the main difference just is that the former has global pollution? If so, why core-js doesn't use(directly import) core-js-pure to polyfill and then add it to global? IMO, this will greatly reduce the duplications because at now the libs use transform-runtime(finally core-js-pure) but apps use preset-env(finally core-js), there is no shared/shareable codes between apps and libs, right?

Answer 1

@babel/plugin-transform-runtime: add polyfills without attatching them to the global scope.

@babel/preset-env with useBuiltins: "usage": add polyfills to the global scope.

@babel/preset-env with useBuiltIns: false (default): Don't add polyfills.

So @babel/plugin-transform-runtime is recommended for both library and application to add polyfills.

babel.config.js:

module.exports = {
  presets: ['@babel/preset-env'],
  plugins: [
    '@babel/transform-runtime',
  ],
};