babelrc

Our macpaw.com site is created with tons of JS. But do we really need to load a full JS bundle with our project? Let's start from the beginning.

The amount of necessary code is defined by babel.

What is the purpose of using babel?

It's 2020 and the opportunities of the JavaScript language continue to increase yearly. A polyfill is a browser fallback, made in JavaScript, that allows new functionality to work in older browsers. That's what babel does.

Usually, babel configuration consists of:

@babel/preset-env allows you to use the latest JavaScript without needing to micromanage which syntax transforms are needed by your target environment. And babel-polyfill allows web developers to use an API regardless of whether or not it is supported by a browser, and usually with minimal overhead.

This type of configuration has its own drawback. Lots of redundant code will be added to our files and we won't use it even once in our project. What are the problems in this case?

Both of these problems have to effect page load and time of UI response.

However, we can ask babel to transform only those syntax constructions which will be used with our project. For this purpose we have to update .babelrc file with adding @babel/preset-env option, which is called useBuiltIns: usage

That's exactly what we've done in our project, so you can see the result below.