What is the significance of browserslist in package.json created by create-react-app

I was asked this in an interview. I could not answer.

"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]

I can see that Its an array. "not ie <=11" means will not run on lower than Internet Explorer v11 "op_mini" must be related to Opera mini.

But I want to know why it is required.

Solution 1:

What is Browserslist?

Browserslist is a tool that allows specifying which browsers should be supported in your frontend app by specifying "queries" in a config file. It's used by frameworks/libraries such as React, Angular and Vue, but it's not limited to them.

Why would we want it?

During development we want to use the latest javascript features (e.g ES6) as it makes our jobs easier, leads to cleaner code, possibly better performance.

As javascript evolves, browsers won't support new features at the same pace, for instance not all browsers have built-in support for ES6 (aka ES2015). By using browserslist, transpilers/bundlers know what browsers you want to support, so they can "group" browsers in different categories and generate separate bundles, for example:

• Legacy Bundle: Contains polyfills, larger bundle size, compatible with old browsers without ES6 support.
• Modern Bundle: Smaller bundle size, optimized for modern browsers.

So our entrypoint (e.g index.html) is generated in a way that it'll load the required bundles according to current browser being used by a user.

This process is done by Angular, Vue and React. In the future, bundler tools may generate even more bundles depending on how different browsers are, one bundle per group of browsers. Generating more bundles optimizes your app even more, at the price of making the build slower (and more complex), it's a tradeoff.

Let's see each individual query in your example:

• 0.2%: All browsers that have at least 0,2% of global market share
• not dead: Exclude browsers without official support in the last 24 months
• not ie <= 11: Exclude IE 11 and older versions
• not op_mini all: Exclude Opera Mini

You can find more about it (including further query options) in Browserslist's GitHub repository.

Solution 2:

That's a React configuration option to know which browsers the build process should target to.

As the documentation says:

The browserslist configuration controls the outputted JavaScript so that the emitted code will be compatible with the browsers specified.

If you are intend to use a ES feature make sure all browsers specified supports it, otherwise you have to include polyfills manually. React will not do it for you automatically.

See more in: https://facebook.github.io/create-react-app/docs/supported-browsers-features and https://create-react-app.dev/docs/supported-browsers-features/