4

I am currently using webpack to bundle my project and my main.js is pretty big so I currently looking for a way to reduce size of my main.js. I can see the of the the biggest things in my bundles is core-js stuff. I am using core-js to support IE11 mainly for promise and generator(Saga)

I have some setup on babelrc.

["@babel/preset-env", {
      "useBuiltIns": "usage",
      "corejs": 3,
      "targets": {
        "ie": "11"
      }
}]

["@babel/transform-runtime", {
      "corejs": 3
}],

index.js

import 'core-js/stable'
import 'regenerator-runtime/runtime'

I like to know if both of them should be in the bundle or one of each.

enter image description here

fiddlest
  • 1,262
  • 2
  • 17
  • 42

1 Answers1

0

Your babel setting is incorrect. You can't set "@babel/preset-env" and "@babel/transform-runtime" to both use corejs 3.

The core-js author said these

It's 3 different ways of core-js usage. You should use only one of them:

  1. core-js direct import
  2. core-js injecting by usage plugin from @babel/preset-env
  3. core-js injecting without global pollution by @babel/transform-runtime plugin

I also learned that the hard way thought this How do I polyfill Promise.any() using babel 7?

The key question here is what is the difference between core-js and core-js-pure ? As the author said it in the core-js 3 release note,

Extract a version without global namespace pollution to a separate core-js-pure package (replacement for core-js/library).

Check the core-js-pure readme for further information (like "The pure version of core-js / babel-runtime is intended for usage in libraries' code ...").

In your case because you set them both, core-js & core-js-pure both imported into main.js, so it is big.

Qiulang
  • 10,295
  • 11
  • 80
  • 129