search

GoogleChrome / web-vitals

Essential metrics for a healthy site.
https://web.dev/vitals
Apache License 2.0
7.55k stars 413 forks source link

How to use polyfill + /base version with create-react-app and similar? #132

Closed 0xdevalias closed 1 year ago

0xdevalias commented 3 years ago

I was wondering if there are any known/standard ways of including the polyfill in the <head> of a create-react-app app without ejecting, and without copy/pasting the content?

I've been googling around and attempting to figure a way, but so far the closest I came was attempting to think how I could 'abuse' the InlineChunkHtmlPlugin configuration to trick it into adding this script as a runtime-foo.js file (though couldn't make it work)

https://github.com/facebook/create-react-app/blob/48d7ffe7477007c572aea66ccab5ec0b4d344893/packages/react-scripts/config/webpack.config.js#L629-L634

The answer might just be "it isn't possible", or "use some other external tool", which if needs be, I guess we can do. But I figured this would likely be a fairly common question that might come up for people, particularly as Firebase Performance setup docs say to use this library:

philipwalton commented 3 years ago

I'm actually not very familiar with create-react-app, @housseindjirdeh do you know?

juwaar commented 1 year ago

@jmail.com j tzk suc hcd`hcd

packages```

``/react-scripts/config/webpack.config.js

juwar```
out.```
> ``````````

gsoxbffixbsux hebds`bes` jsvsvbshwodnes`usbsoxbesuwvdkd```

  • [ ] #shebdichedidbusbeidueusjeosz shebdid 
 // Inlines the webpack runtime script. This script is too small to warrant
  // a network request.
  // https://github.com/facebook/create-react-app/issues/5358
  isEnvProduction &&
    shouldInlineRuntimeChunk &&![image](https://github.com/GoogleChrome/web-vitals/assets/116327057/a42435f8-74da-49ef-8b9e-d6f2df2bd430)csixbexc
tunetheweb commented 1 year ago

Clsoing this as sounds more like a CreateReactApp question.