JS module/nomodule adoption

[siakaramalegos]

If not covered in the JavaScript chapter:

• [ ] Adoption was still quite low last year - see how the numbers compare to this year and correlate with CWV and TBT.
• [ ] Determine potential saving using Lighthouse data for "legacy-javascript" flag.

[kevinfarrugia]

Is it possible to make use of https://github.com/GoogleChromeLabs/estimator.dev to calculate potential savings?

[siakaramalegos]

That script takes a long time to run considering how many origins we would need to run, but it looks like the Lighthouse data should have something usable:

"legacy-javascript": {
                  "id": "legacy-javascript",
                  "title": "Avoid serving legacy JavaScript to modern browsers",
                  "description": "Polyfills and transforms enable legacy browsers to use new JavaScript features. However, many aren't necessary for modern browsers. For your bundled JavaScript, adopt a modern script deployment strategy using module\/nomodule feature detection to reduce the amount of code shipped to modern browsers, while retaining support for legacy browsers. [Learn More](https:\/\/philipwalton.com\/articles\/deploying-es2015-code-in-production-today\/)",
                  "score": 1,
                  "scoreDisplayMode": "numeric",
                  "numericValue": 0,
                  "numericUnit": "millisecond",
                  "displayValue": "",
                  "details": {
                      "type": "opportunity",
                      "headings": [],
                      "items": [],
                      "overallSavingsMs": 0,
                      "overallSavingsBytes": 0
                  }
              },

[kevinfarrugia]

Nice, and it also includes the overall savings. 👍