Add Dynamic Import and Code Splitting Support to Webpack

[dainemawer]

Is your enhancement related to a problem? Please describe.
In a manner of speaking yes, Web Performance and Web Vitals are becoming increasingly important. The need to reduce bundle size and lazy-load components that are not critical to user interaction is an important milestone for JavaScript performance in 2021.

Describe the solution you'd like
I would like to suggest adding support for Code Splitting and Dynamic Import syntax to our Webpack configuration. This would mean a few adjustments to Webpacks settings. As well as installing support for @babel/plugin-syntax-dynamic-import that would allow engineers to lazy-load JS components.

It would also endeavour to set up code-splitting as a default in the Webpack configuration. Engineers would be able to use the following syntax to load components dynamically:

import('./components/slider')
.then(({ default: Slider }) => {
	Slider.init();
});

As a default, we'd see increased performance gains in FID (First Input Delay) and would align projects to modern performance standards.