Browserslist is a tool that allows specifying which browsers should be supported in our 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 an example:

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

• 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

How to use it ?

All tools will find target browsers automatically, when you add the following to package.json:

  "browserslist": [
    "defaults",
    "not IE 11",
    "maintained node versions"
  ]

Or in .browserslistrc config (in the root our application. The same place as the package.json) :

# Browsers that we support
# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
#
# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed

> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11