113

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.

Serenity
  • 35,289
  • 20
  • 120
  • 115
Tanzeel
  • 4,174
  • 13
  • 57
  • 110

2 Answers2

129

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.

Jacob van Lingen
  • 8,989
  • 7
  • 48
  • 78
Alisson Reinaldo Silva
  • 10,009
  • 5
  • 65
  • 83
  • 8
    Why do a lot of then exclude "opera mini"? – james emanon Feb 17 '21 at 19:19
  • 8
    @jamesemanon because Opera Mini doesn't have built-in support for ES6 features, so if you use ES6 and want your app to work on Opera Mini, you need to add polyfills for it, meaning that you'll need to either 1) build a separate bundle for it, or 2) force your whole bundle to include ES5 polyfills. Option 1) makes your build almost twice as slower (and I'm not sure all js frameworks can do this), whereas Option 2) makes your bundle size considerably larger, which will be bad for modern browser users. Option 3) is to exclude browsers without ES6 support. – Alisson Reinaldo Silva Feb 17 '21 at 21:57
  • For Example not dead: Exclude browsers without official support in the last 24 months > this means the bundler will generate a separate bundle for not dead option @Alisson – Siluveru Kiran Kumar Aug 03 '21 at 06:34
  • Github description of this package is pretty vague. Thanks for the detailed explanation. – wenn32 Dec 12 '22 at 11:20
  • recently i got perfomance issue with webgl2 ,this issue waste me 2 day to digging.after i change production config to development config all problem is gone – hulkyuan May 25 '23 at 02:16
40

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/

Binita Bharati
  • 5,239
  • 1
  • 43
  • 24
Fernando Souza
  • 795
  • 8
  • 11
  • 42
    it's not just for React, it works as a general solution for any javascript technology – johnmarinelli Jul 20 '20 at 11:02
  • 8
    What does the percentage like `0.2%` means here? – Mahmoud Mohamed Zakria Aug 03 '20 at 17:42
  • 3
    @MahmoudMohamedZakria. That stands for the percentage of browsers usage. – Fernando Souza Aug 05 '20 at 09:12
  • 7
    don't forget to run periodically `npx browserslist@latest --update-db`. It will update your package-lock file with new caniuse-lite version. In this case, you will be sure that 'last two versions' or '>0.2%' will target what you expect. – mashi Sep 28 '21 at 09:08
  • if the bundles they create do not provide polyfills then how the bundles are differing ? Are they patching some non standard behaviours for those target browsers ? Otherwise, Im not getting what they are for. – kitimenpolku Apr 18 '23 at 11:36