Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 750
Vovan Avatar asked Apr 29 '18 10:04

Vovan


People also ask

What is polyfill Babel?

Babel Polyfill adds support to the web browsers for features, which are not available. Babel compiles the code from recent ecma version to the one, which we want. It changes the syntax as per the preset, but cannot do anything for the objects or methods used.

Does Babel include polyfill?

Babel includes a polyfill that includes a custom regenerator runtime and core-js. This will emulate a full ES2015+ environment (no < Stage 4 proposals) and is intended to be used in an application rather than a library/tool. (this polyfill is automatically loaded when using babel-node ).


1 Answers

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.

like image 189
cyr_x Avatar answered Sep 24 '22 15:09

cyr_x