Core-js: Bundle size seems to big

[fender]

The gzipped size for all polyfills for my project is at 33kb. Is that expected with my configuration below? It seems pretty high and what are all those 'internals' being included? 🤔

I'm building my project using Webpack and Babel. This is my browserslist from package.json:

"browserslist": [
    "> 0.3% in US",
    "last 2 versions",
    "Firefox ESR",
    "not ie <= 11",
    "not dead"
  ],

My .babelrc is:

"presets": [
    "@babel/preset-react",
    ["@babel/preset-env", {
      "useBuiltIns": "entry",
      "corejs": 3,
    }],
  ],

And I include core-js using these 2 lines at the beginning of my app:

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

[zloirock]

Since you have web.timers module in your bundle, something wrong with your config - it's required only for IE9-. The list of required modules for your browserslist targets:

require('core-js-compat')({ targets: '> 0.3% in US, last 2 versions, Firefox ESR, not ie <= 11, not dead', filter: /^(es|web)\./ }).targers;
// =>
{
    'es.symbol': { ios: '9.3' },
    'es.symbol.description': {
      chrome: '67',
      firefox: '60',
      edge: '17',
      ios: '9.3',
      safari: '12',
      samsung: '8.2'
    },
    'es.symbol.async-iterator': { edge: '17', ios: '9.3' },
    'es.symbol.has-instance': { ios: '9.3' },
    'es.symbol.is-concat-spreadable': { ios: '9.3' },
    'es.symbol.match': { edge: '17', ios: '9.3' },
    'es.symbol.match-all': {
      chrome: '67',
      firefox: '60',
      edge: '17',
      ios: '9.3',
      safari: '12',
      samsung: '8.2'
    },
    'es.symbol.replace': { edge: '17', ios: '9.3' },
    'es.symbol.search': { edge: '17', ios: '9.3' },
    'es.symbol.species': { ios: '9.3' },
    'es.symbol.split': { edge: '17', ios: '9.3' },
    'es.symbol.to-primitive': { ios: '9.3' },
    'es.symbol.to-string-tag': { ios: '9.3' },
    'es.array.concat': { ios: '9.3' },
    'es.array.filter': { ios: '9.3' },
    'es.array.flat': {
      chrome: '67',
      firefox: '60',
      edge: '17',
      ios: '9.3',
      samsung: '8.2'
    },
    'es.array.flat-map': {
      chrome: '67',
      firefox: '60',
      edge: '17',
      ios: '9.3',
      samsung: '8.2'
    },
    'es.array.includes': { ios: '9.3' },
    'es.array.iterator': { ios: '9.3', samsung: '8.2' },
    'es.array.map': { ios: '9.3' },
    'es.array.reverse': { ios: '9.3', safari: '12' },
    'es.array.slice': { ios: '9.3' },
    'es.array.sort': { ios: '9.3' },
    'es.array.species': { ios: '9.3' },
    'es.array.splice': { ios: '9.3' },
    'es.array.unscopables.flat': {
      chrome: '67',
      firefox: '60',
      edge: '17',
      ios: '9.3',
      safari: '12',
      samsung: '8.2'
    },
    'es.array.unscopables.flat-map': {
      chrome: '67',
      firefox: '60',
      edge: '17',
      ios: '9.3',
      safari: '12',
      samsung: '8.2'
    },
    'es.array-buffer.constructor': { ios: '9.3' },
    'es.array-buffer.slice': { ios: '9.3', safari: '12' },
    'es.date.to-json': { ios: '9.3' },
    'es.date.to-primitive': { ios: '9.3' },
    'es.function.has-instance': { ios: '9.3' },
    'es.json.to-string-tag': { ios: '9.3' },
    'es.map': { ios: '9.3' },
    'es.math.to-string-tag': { ios: '9.3' },
    'es.number.parse-float': { ios: '9.3' },
    'es.number.to-fixed': { edge: '17' },
    'es.object.entries': { ios: '9.3' },
    'es.object.from-entries': {
      chrome: '67',
      firefox: '60',
      edge: '17',
      ios: '9.3',
      safari: '12',
      samsung: '8.2'
    },
    'es.object.get-own-property-descriptors': { ios: '9.3' },
    'es.object.to-string': { ios: '9.3' },
    'es.object.values': { ios: '9.3' },
    'es.promise': { firefox: '60', edge: '17', ios: '9.3', samsung: '8.2' },
    'es.promise.all-settled': {
      chrome: '67',
      firefox: '60',
      edge: '17',
      ios: '9.3',
      opera: '60',
      safari: '12',
      samsung: '8.2'
    },
    'es.promise.finally': { firefox: '60', edge: '17', ios: '9.3', samsung: '8.2' },
    'es.reflect.apply': { ios: '9.3' },
    'es.reflect.construct': { ios: '9.3' },
    'es.reflect.define-property': { ios: '9.3' },
    'es.reflect.delete-property': { ios: '9.3' },
    'es.reflect.get': { ios: '9.3' },
    'es.reflect.get-own-property-descriptor': { ios: '9.3' },
    'es.reflect.get-prototype-of': { ios: '9.3' },
    'es.reflect.has': { ios: '9.3' },
    'es.reflect.is-extensible': { ios: '9.3' },
    'es.reflect.own-keys': { ios: '9.3' },
    'es.reflect.prevent-extensions': { ios: '9.3' },
    'es.reflect.set': { ios: '9.3' },
    'es.reflect.set-prototype-of': { ios: '9.3' },
    'es.regexp.constructor': { edge: '17', ios: '9.3' },
    'es.regexp.flags': { edge: '17' },
    'es.regexp.to-string': { edge: '17', ios: '9.3' },
    'es.set': { ios: '9.3' },
    'es.string.ends-with': { edge: '17', ios: '9.3' },
    'es.string.includes': { edge: '17', ios: '9.3' },
    'es.string.match': { edge: '17', ios: '9.3' },
    'es.string.match-all': {
      chrome: '67',
      firefox: '60',
      edge: '17',
      ios: '9.3',
      safari: '12',
      samsung: '8.2'
    },
    'es.string.pad-end': { ios: '9.3' },
    'es.string.pad-start': { ios: '9.3' },
    'es.string.replace': {
      firefox: '60',
      edge: '17',
      ios: '9.3',
      safari: '12',
      samsung: '8.2'
    },
    'es.string.search': { edge: '17', ios: '9.3' },
    'es.string.split': { edge: '17', ios: '9.3' },
    'es.string.starts-with': { edge: '17', ios: '9.3' },
    'es.string.trim': { ios: '9.3', safari: '12' },
    'es.string.trim-end': {
      firefox: '60',
      edge: '17',
      ios: '9.3',
      safari: '12',
      samsung: '8.2'
    },
    'es.string.trim-start': { firefox: '60', edge: '17', ios: '9.3', samsung: '8.2' },
    'es.typed-array.float32-array': { ios: '9.3', safari: '12' },
    'es.typed-array.float64-array': { ios: '9.3', safari: '12' },
    'es.typed-array.int8-array': { ios: '9.3', safari: '12' },
    'es.typed-array.int16-array': { ios: '9.3', safari: '12' },
    'es.typed-array.int32-array': { ios: '9.3', safari: '12' },
    'es.typed-array.uint8-array': { ios: '9.3', safari: '12' },
    'es.typed-array.uint8-clamped-array': { ios: '9.3', safari: '12' },
    'es.typed-array.uint16-array': { ios: '9.3', safari: '12' },
    'es.typed-array.uint32-array': { ios: '9.3', safari: '12' },
    'es.typed-array.copy-within': { ios: '9.3' },
    'es.typed-array.every': { ios: '9.3' },
    'es.typed-array.fill': { ios: '9.3' },
    'es.typed-array.filter': { ios: '9.3' },
    'es.typed-array.find': { ios: '9.3' },
    'es.typed-array.find-index': { ios: '9.3' },
    'es.typed-array.for-each': { ios: '9.3' },
    'es.typed-array.from': { ios: '9.3', safari: '12' },
    'es.typed-array.includes': { ios: '9.3' },
    'es.typed-array.index-of': { ios: '9.3' },
    'es.typed-array.iterator': { ios: '9.3' },
    'es.typed-array.join': { ios: '9.3' },
    'es.typed-array.last-index-of': { ios: '9.3' },
    'es.typed-array.map': { ios: '9.3' },
    'es.typed-array.of': { ios: '9.3', safari: '12' },
    'es.typed-array.reduce': { ios: '9.3' },
    'es.typed-array.reduce-right': { ios: '9.3' },
    'es.typed-array.reverse': { ios: '9.3' },
    'es.typed-array.slice': { ios: '9.3' },
    'es.typed-array.some': { ios: '9.3' },
    'es.typed-array.sort': { ios: '9.3' },
    'es.typed-array.to-locale-string': { edge: '17', ios: '9.3' },
    'es.typed-array.to-string': { ios: '9.3' },
    'es.weak-map': { ios: '9.3' },
    'es.weak-set': { ios: '9.3' },
    'web.dom-collections.for-each': { ios: '9.3' },
    'web.dom-collections.iterator': { edge: '17', ios: '9.3', safari: '12', samsung: '8.2' },
    'web.immediate': {
      chrome: '67',
      firefox: '60',
      ios: '9.3',
      opera: '60',
      safari: '12',
      samsung: '8.2'
    },
    'web.queue-microtask': {
      chrome: '67',
      firefox: '60',
      edge: '17',
      ios: '9.3',
      safari: '12',
      samsung: '8.2'
    },
    'web.url': { edge: '17', ios: '9.3' },
    'web.url.to-json': { chrome: '67', edge: '17', ios: '9.3', samsung: '8.2' },
    'web.url-search-params': { edge: '17', ios: '9.3' }
}

The size of the bundle should be smaller, but not by much. If you have questions why some modules should be required - see tests.

[fender]

@zloirock Thank you. Do you have any idea what could be adding all the extra unrequired polyfills?

I build my app via Webpack, and when passing debug: true in to preset-env the output was expected with the correct list of browser targets and no mention at all of web.timers but somehow it's still being added into the output asset?!

[zloirock]

Theoretically, some of your dependencies can add it (for example, if they import just core-js or core-js/stable and it's not transpiled). I have no more ideas.

[fender]

@zloirock Sorry, ignore my last comment (deleted). I had a facepalm moment where I realised that if you use useBuiltIns: usage then you should not add this at the start of your entry file also:

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

Removing those 2 lines from the entry file fixed my issue and the core-js include is now almost half the size (15kb gzipped based on the browsers list above).

Perhaps we can update the docs to help make that super clear?

[zloirock]

It's a popular issue. Feel free do add a PR.