Why we import import "core-js/stable" library?

Question

I'm in a process of optimising one react project. I can see "core-js/stable" is used. Is this package still required for latest browser ? since most browser support ES6 features.

Answer 1

Even if it may not be currently required (there's no way to tell without looking at your code, and knowing precisely what versions of what browsers you want to support), what if a developer later uses a new feature in the app that needs to be polyfilled, even in modern browsers? To be on a safer side and automate the process, it's recommended to include core-js/stable before your entrypoint, declare the browsers you want to support in your project's browserlist (check out the browserlist playground), and let core-js/stable only include the required polyfills in your bundle (according to the caniuse database). Of course, remember that some polyfills may not be currently supported by core-js/stable, needing to be included separately.

An alternative approach may be to use polyfill.io, select ES6 (and other polyfills you may need), generate your URL and include it at the top of your head tag. Compared to core-js/stable, the optimization advantage is that it includes a polyfill conditionally based on the user agent requesting the URL. It's a good advantage for very modern browsers, some of them may receive 0KB of polyfills by polyfill.io. The disadvantage is that it doesn't work with browserlist, so it is more of your responsibility to know what polyfills your app needs, generate the correct polyfill.io URL, and test your app on the oldest version you want to support for each browser.