3.3 Use Code-Splitting Within Projects

When dealing with heavy components (such as JavaScript), the ability to modularize them into smaller pieces that can be loaded as and when required reduces the amount of redundancy and serves as a great way to make your scripts more sustainable.

Criteria

Code Splitting: Breakdown bandwidth-heavy components into segments that can be loaded as required.

Impact

Medium

Effort

Low

Benefits

Performance:
Having smaller (modular) components allows for more optimized caching and loading only what code functions are required (which reduces the payload). Unused portions of a resource remain un-downloaded (potentially huge savings).
Economic:
Reducing the size of large files will result in lower bandwidth bills for service providers.
Conversion:
A faster website reduces the chance of abandonment (which is especially of concern for visitors of handheld devices).

GRI

materials: Medium
energy: Medium
water: Medium
emissions: Medium

Example

Code:

link.addEventListener("click", (e) => {
	e.preventDefault();
	import("/modules/my-module.js")
	.then((module) => {
		/* Do something */
	})
	.catch((err) => {
		console.error(err.message);
	});});

Dynamic Imports.

Resources

View the Guideline