Dynamic Imports with Adobe AEM & Webpack | AEM Community Blog Seeding

[kautuk_sahni]

Dynamic Imports with Adobe AEM & Webpack by Initialyze

Abstract

Performance of AEM based sites can be greatly improved by leveraging Dynamic Imports using Webpack. Sites built with AEM use components to compose a page. As a best practice, developers should generally split their code at the component level and use clientlibrary feature to combine and minify their JavaScript files with AEM. But often there are scenarios where specific components are only used on certain areas of the site or on specific pages and it doesn’t make sense to combine their JavaScript modules into a single bundle.

The below video show’s a demo of how dynamic import with AEM Components would work

This article walks through using Webpack Dynamic Imports to load JavaScript modules on demand, based on components present on the page as demo’d in the video above. To get a better understanding of dynamic imports check out a previous article in this series about What are Dynamic Imports and how to use them?

Prepare ui.frontend module for Dynamic Imports
The AEM Archetype has an option to generate a ui.frontend module with a dedicated front-end build mechanism based on Webpack to keep front-end resources separate. This below instructions assume you have generated the ui.frontend module as part of your AEM project generation using archetype.

Step 1: Update the clientlib.config.js
We have updated the clientlib.config.js to create a new clientlibrary named clientlib-dynamic-modules for storing shared module files inside /resources folder.

The clientlibrary node module will generate a new clientlib based on this configuration and copy the chunks from dist/clientlib-site-shared-modules/resources into this clientlibrary’s resources folder.

// clientlib.config.js
{
name: 'clientlib-dynamic-modules',
categories: ['dynamic-imports-demo.dynamic-modules'],
serializationFormat: "xml",
allowProxy: true,
dependencies: [],
assets: {
resources: [
"dist/clientlib-dynamic-modules/resources/*.js"
]
},
}

Read Full Blog

Dynamic Imports with Adobe AEM & Webpack

Q&A

Please use this thread to ask the related questions.

[Nirmal_Jose]

great solution

[mmange]

Thanks @kautuk_sahni