6

I just setup new webpack 4 project and in my main js file imported babel-polyfill

import 'babel-polyfill';

And after webpack production build i analized my bandle with source-map-explorer i see such picture enter image description here

So babel-polyfill (core-js) took 150 Kb which is too much IMO.

Any thoughts how can i reduce size ? I don't want to include any specific polyfills (there should be some tree-shaking, so not used code should be deleted ?).

I use this boilerplate: https://github.com/flexdinesh/react-redux-boilerplate/tree/master/config

Vololodymyr
  • 1,996
  • 5
  • 26
  • 45

1 Answers1

5

The size of 150kb seems reasonable to me because you're importing all polyfills. Therefore the tree-shaking feature of webpack4 will not remove any unused code because everything is used.

I might assume the sources claiming the size for the whole bundle should be ~60-80kb meant the size after minification + compression.

Did you read the instructions of how to use the @babel/polyfill library correctly? It recommends the usage of @babel/preset-env to import only the polyfills you need for your production target. This will probably greatly reduce the size of your bundle.

cyr_x
  • 13,987
  • 2
  • 32
  • 46
  • You wrote: *"Therefore the tree-shaking feature of webpack4 will not remove any unused code because everything is used."* It can be understand different wayt, but generally, do we have any third party tool that can check that "everything is used in the bandle"? – Roman Pokrovskij Oct 03 '18 at 13:53
  • you don't need to check... it runs the code so it needs it: https://github.com/babel/babel/blob/master/packages/babel-polyfill/src/index.js webpack will absolutely include anything ran with "import 'abc'" – Meirion Hughes Oct 03 '18 at 13:59
  • The tree-shaking feature does check your bundle for unused code and removes it, but in this case, everything from the polyfill library is used, because everything is imported. As i wrote @babel/preset-env helps you to not import polyfills that are not needed for your target environment. – cyr_x Oct 03 '18 at 13:59
  • OK. It seems I got it. "Not used" means "not imported". But I do not understand why transpiler can't report which polyfills where not used since he definitely knows which were used (during transpilation phase). Or Babel can do it? – Roman Pokrovskij Oct 04 '18 at 21:34