Remove polyfills for IE

[vanitabarrett]

What

At the moment, we ship polyfills to all browsers even when they're not needed. We think around 50% of the JavaScript we ship is polyfills (this might say more about the amount of JavaScript we have, rather than the size of the polyfills).

Having to include polyfills also means we tend to restrict ourselves to features that we know are either 1) well supported, or 2) don't require large polyfills to work in older browsers.

Why

There is a performance impact if we're shipping unnecessary JavaScript to browsers that don't need it.
Our current approach puts some restrictions on the JavaScript features we use. This isn't necessarily causing problems right now, but might do in future when we come to build more complex components. (also depends on #2503 )

Who needs to work on this

Developers

Who needs to review this

Developers

Done when

Depends on our browser support proposal being approved by the community. If we go down the route of dropping IE support to 'functional':

• Remove IE8-10 JavaScript polyfills, helpers, config #3570
• Remove IE11 vendor polyfills #3720
• Remove checks for newer JavaScript features #3723
• Update/remove polyfill documentation and pick up Improve polyfilling doc #2159 as part of it (making sure it meets style guide etc)
• If we remove all polyfills and won't be adding any in future, we can close Review application can mislead if a component is polyfilled #674

[NickColley]

On a project I removed the polyfills in the build step, sharing here if anyone is Googling finds this issue and wants to do the same:

Before	After
9.9kb gzipped (39.2kb expanded)	6.1kb gzipped (25.4kb expanded)

Rollup Plugin:

// file: rollup-remove-polyfills.js
// Based on https://github.com/proteriax/rollup-plugin-ignore

// Replace polyfills with empty files that'll get removed with tree shaking.
function removePolyfills() {
  const emptyFile = "export default {}";
  const emptyFileName = "\0rollup_plugin_ignore_empty_module_placeholder";
  return {
    resolveId(importee) {
      return importee.includes("vendor/polyfills") ? emptyFileName : null;
    },
    load(id) {
      return id === emptyFileName ? emptyFile : null;
    },
  };
}

module.exports = removePolyfills;

// file: index.mjs
import { initAll } from "govuk-frontend/govuk-esm/all.mjs";

initAll();

rollup ./index.mjs --file output.js --plugin ./rollup-remove-polyfills.js 

[36degrees]

Is there something else to review after #3570 or should this go back to in progress / backlog?

[domoscargin]

Paging @claireashworth, since the last bit of work on this is documentation.

Though we first have to decide what polyfilling actually looks like going forward.

[36degrees]

This is done!