• 2 min read
One More .babel
Let's get to the basics first. The amount of necessary code is defined by Babel.
What is the purpose of using Babel?
Babel enables developers to write code in the latest JS version and then have it compiled into a version that can run in different environments.
Usually, the Babel configuration consists of the following steps:
- create a .babelrc configuration file with
- connect babel-polyfill libraries to a common JS file
This type of configuration has its drawback. It will add lots of code you will never use in your app. What are the additional problems in this case?
- Increased size of JS files results in a slower loading
- Increased code run time
In our project, these two problems affected page load time and UI response.
We can ask Babel to transform only syntax constructions used in the project. For this purpose, we have to update the .babelrc file by selecting the
usedBuiltIns: “usage” option in
That's precisely what we've done on our MacPaw website. You can see the results below.
|File name||Default options||useBuiltIns: usage|
After we switched to
The simple Babel configuration made the website faster without compromising cross-browser compatibility.