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

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:

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

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./flexdinesh/react-redux-boilerplate/tree/master/config

• javascript
• webpack
• babeljs
• webpack-4
• babel-polyfill

• @JaromandaX, none. But according to ments from github it should be ~60-80 Kb minified. And in my case i see x2 size and this is strange. Don't you think ? – Vololodymyr Commented Apr 29, 2018 at 12:55
• Oh, I didn't know that - sorry – Jaromanda X Commented Apr 29, 2018 at 22:46

1 Answer 1

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 + pression.

Did you read the instructions of how to use the @babel/polyfill library correctly? It remends 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.