Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

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

Avatar

Administrator

BlogImage.jpg

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

Abstract

Nowadays being performant on page load is critical. A fast page load speed is critical to achieve 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 efficiently. 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 speed 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.

Webpack uses two techniques to achieve code splitting:
ES6 import() syntax.
Webpack-specific approach (require).
Although ES6 Syntax is the recommended way for creating and importing bundles, we will use the Webpack-specific approach require.context that gives us a map of components (files) within a specific location. With the list of components we want to detach from the main javascript file we can create a new clientlib which will be acting as a provider while our main clientlib will only contain a small JS file that will act as the loader. This loader will have the necessary logic to know where each module is located and when to call them through an HTPP call from the browser.

Read Full Blog

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

Q&A

Please use this thread to ask the related questions.

0 Replies