CODEWITHSUNDEEP
javascriptwebpackbabeljswebpack-4babel-polyfill
Vololodymyr
Vololodymyr

Reputation: 2288

How to reduce babel-polyfill size (150 KB minified)?

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

Upvotes: 6

Views: 4471

Answers (1)

cyr_x
cyr_x

Reputation: 14257

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.

Upvotes: 5

Related Questions