I was experimenting with Gatsby and polyfills using browserlist, which is supported by Gatsby (doc).
Using the default browserlist config, I get the expected result which creates polyfills for IE11 and a working alert. See my github repo example. The site is currently available here at Netlify.
So, I can see in the produciton code how the arrow functions and the array.prototype.find function are polyfilled. Nothing weird so far.
Now, if I change the browserlist to last 2 Chrome versions
and build production I would expect that the polyfill for the array find() method would dissappear since it is supported by chrome. However, I believe I can still find the same polyfills (from core-js) in app-2934fab61c547573181d.js
:
dRSK: function(t, e, n) {
"use strict";
var r = n("XKFU")
, o = n("CkkT")(5)
, i = !0;
"find"in [] && Array(1).find((function() {
i = !1
}
)),
r(r.P + r.F * i, "Array", {
find: function(t) {
return o(this, t, arguments.length > 1 ? arguments[1] : void 0)
}
}),
n("nGyu")("find")
},
So my question is: why are these polyfills still available, even when I use a browserlist query which obviously wouldn't need this?
This might sound a bit crazy but "It works on my machine" :)
I ran npm run build
in your repo and the bundle contained the find
polyfill - which is expected since browserslist
is [">0.25%", "not dead"]
.
Changing browserslist
to ["last 2 Chrome versions"]
didn't change anything in the build - find
was still there.
After some experimenting I noticed that any browserslist
change was ignored.
So I tried this:
browserslist
in package.json
npm run clean
- removes .cache
and public
rm -rf node_modules
npm install
npm run build
: and find
polyfill is gone!Hope this works for you!
I don't have a logical explanation for this.
PS: in the docs they do recommend to clean
after editing package.json
- details. Reinstalling node_modules
seems a bit extreme but it seems to solve it.