3.3 Modularize bandwidth-heavy components
Break down large components into smaller, self-contained pieces that can be requested only when required to save bandwidth.
Criteria
- Code splitting: Machine-testable
Break down bandwidth-heavy components into smaller, modular segments that can be loaded only when required. This applies to both front-end and back-end code.- Bundling dependancies
- Code-split JavaScript
- Code splitting
- Code splitting – What, When and Why
- Electricity Intensity of Internet Data Transmission
- How code splitting increases performance
- import
- JavaScript performance
- Reuse and recycle
- Web performance, code splitting strategies, and a React case study
- What is code splitting in Next.js?
Benefits
- Conversion
Modularizing code can accelerate performance, improving user experience while reducing the chance of abandonment. This is especially impact for users of low-resource devices, such as handhelds. - Economic
Reducing the size of large files will reduce bandwidth expenses for service providers. - Performance
Using smaller, modular components allows for more effective caching of commonly those reused components, while loading functions only when required reduces the payload. Unused portions of a larger resource will not be downloaded, which can have a considerable impact.
GRI
- Materials: Medium
- Energy: Medium
- Water: Medium
- Emissions: Medium