What is the significance of browserslist in package.json created by create-react-app
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/
Browserslist is a tool that allows specifying which browsers should be supported in your frontend by using "queries". It's used by modern javascript frameworks/tools like React, Angular and VueJS, but it's not limited to them.
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 repo.
With this, compilers can somehow implement more sophisticated and optimized build strategies.
For example, Angular compiler can generate two separate bundles in case you want to support legacy ES5 browsers, such that one bundle is aimed for these legacy browsers and will contain polyfills so the code can work (thus having a larger bundle size), and another bundle optimized for modern browsers which will be much smaller (as modern browsers don't need polyfills).