AEM ui.frontend Module: Code Splitting, Dynamic Imports and TypeScript | AEM Community Blog Seeding

[kautuk_sahni]

AEM ui.frontend Module: Code Splitting, Dynamic Imports and TypeScript by LUCIO POVEDA BERTOS

Abstract

Breaking Down the Monolith
Nowadays being performant on page load is critical. A fast page load speed is critical to acheive a strong SEO ranking and Lighthouse score. A common way of decreasing the time it takes for a page to load is reducing the page's file size using minifiers and compressors. These tools do a great job of reducing the size of the files, but we can go even further to make sites run even more effiiently. As I'll describe below using a technique offered by most bundlers, Code Splitting, that divides large JS bundles into smaller modules that can be lazy loaded as needed, developers can improve page load spead and deliver updated content even more efficiently. At the same time, code splitting will provide the additional benefit of not having to re-load a huge bundle every time there is a small change on a single file/component. With a split bundle the browser will know what file has changed and re-load it independently.



While working with JavaScript bundlers such as Webpack, you have available different approaches or techniques to break the main bundle into smaller pieces. For Webpack one of them is to let the compiler know what files you actually want to split from the main bundle.

Let's see how Webpack defines what code splitting is:
Code splitting is one of the most compelling features of webpack. This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel. It can be used to achieve smaller bundles and control resource load prioritization which, if used correctly, can have a major impact on load time.

Read Full Blog

AEM ui.frontend Module: Code Splitting, Dynamic Imports and TypeScript

Q&A

Please use this thread to ask the related questions.