0

I have a large code base, that assembles to a react app which runs in a website. It is only a part of a larger web-app. I have inherited that code and I have no tests.

Problem is: FireFox hangs after loading polyfill.min.js (all babel/polyfill.js features are included in that file - source: https://babeljs.io/docs/en/babel-polyfill)

babel/polyfill is loaded as an external script if it wasn't loaded before by some other code in the website.

A React-app using Promises and Arrow-functions. Most probably some more es6 code

Maybe reducing the modules of polyfill.min.js could help, but how do I know what I need to Polyfill apart from React, Promises and Arrow-functions?

Is it possible to find out progamaticaly? Because:

  • The code was written by others.
  • I have no tests.

Or should I get rid of polyfill? How to find out what exactly is the cause of the problem. Firefox doesn't tell me what part of the script is slowing down and the console log isn't a great help either (I am not seeing any error messages).

vik
  • 762
  • 1
  • 7
  • 18
  • 1
    From the link you posted: The polyfill is provided as a convenience but you should use it with `@babel/preset-env` and the `useBuiltIns` option so that it doesn't include the whole polyfill which isn't always needed. Otherwise, __we would recommend you import the individual polyfills manually__. – grooveplex Feb 21 '19 at 23:37
  • I have not written the code that I am fixing. My question: how do I know what preset or features do I need. How to find out without automatic tests, without trial&error. – vik Feb 21 '19 at 23:45
  • You include the polyfills for the features that you need (that are not supported in the browsers that you are targeting). ¯\\_(ツ)_/¯. – grooveplex Feb 21 '19 at 23:47

0 Answers0