Optimizing build time of ui.frontend

[aanchalsikka]

Hello,

In AEM projects, often ui.frontend takes the max time to build. If a customer has multiple code bases, then the total time to build multiple ui.frontend modules is very high.

Could you possibly share some best practices that would help bring down the time taken to build a ui.frontend module?

[arunpatidar]

Hi,

If you are not suing cloud manager then you can preinstall node and npm to reduce the npm installtion time and also use 

• npm run prod - full build with JS optimization enabled (tree shaking, etc), source maps disabled and CSS optimization enabled.

The only other way to use traditional clientlibs instead of ui.frontend(which will give you possibility to use modern js features)

[aanchalsikka]

Thanks @arunpatidar for the suggestions.

We are using Cloud manager, but prior to that Jenkins build also occurs.

So, we are looking for ways, to reduce time in both places

[Sady_Rifat]

For our case, we removed frontend-maven-plugin and build the JS and CSS with npm command.

Not sure if it's a best practice or not but it suits our full development environment.

[aanchalsikka]

Thanks for the suggestion @Sady_Rifat 

Can you also please guide, how you made "npm install" and "npm run prod" as part of mvn install for project?

[Sady_Rifat]

As I mentioned, we just removed the frontend-maven-plugin from ui.frontend pom.xml. Now when you did this, in time of maven installation npm i & npm run prod command will not trigger.

Now we run these 2 commands manually(under ui.frontend folder) on the local machine and the build file will be generated.

Things are changed:

• Manual build process
• Build count reduced - Only need when code is changed
• Able to easily manage additional tools like storybook, febuild
• Faster deployment for all environments.

[Jagadeesh_Prakash]

@aanchalsikka 

Consider using a caching system to speed up the build time for ui.frontend modules. There are several caching systems available for AEM projects, including Maven and Gradle. By caching dependencies and build artifacts, you can avoid rebuilding the entire ui.frontend module every time you make a change.

[aanchalsikka · Accepted solution]

Thanks @Jagadeesh_Prakash @Sady_Rifat @arunpatidar for the suggestions and perspectives.

On further analysis, I could break down the areas into following parts:

- Node and npm install: This should be cached as suggested by you as well. In our case, caching is already in place.

- Webpack execution: For customers that have been on AEM for long, might be using older version of various node modules. The latest might have improvements on the same, might have better performance. Explanation available on: https://dev.to/slashgear_/how-to-boost-the-speed-of-your-webpack-build-16h0. 

- Executing ui.frontend only when needed: Maven profile helped here. We just add an additional profile to build ui.frontend (helpful for local deployments).

[BhavaniBharani]

Hi @aanchalsika,

Have you find anyway to reduce the ui.frontend build time for local deployments. I have changed some ui.frontend codes, and trying to deploy its taking 30min to complete the whole build process. ui.frontend alone taking 25min. Please let me know if anything helped you to reduce the build time.

Thanks in advance