Reduce your JS payload when using polyfills in Babel

Are you importing the babel polyfill like...

import 'babel-polyfill';

But only need the odd function like Object.values from ES2017?

Then maybe you can reduce the size of your JS bundle by installing those specific polyfills. Importing the whole of babel-polyfill could be adding a lot of unnecessary code to your bundled JS.

So instead, install core-js which contains the individual polyfills.

npm install --save core-js

Then import the specific polyfills you need.

import 'core-js/fn/object/values';

And you're done. By doing this I saved 27kb on my final minified payload which is a 14% reduction! Not a massive amount but noticeable. Here are the file sizes before and after.

Note: The Babel Polyfill docs explain this concept of requiring specific polyfills, however I wanted to write about the quick wins I made with it!

Thanks!