Optimizing build time of ui.frontend | Community
Skip to main content
A
Adobe Employee
aanchalsikkaAdobe Employee
Adobe Employee
February 15, 2023
Solved

Optimizing build time of ui.frontend

  • February 15, 2023
  • 5 replies
  • 3582 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by aanchalsikka

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).

5 replies

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
February 15, 2023

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)

Arun Patidar
    A
    Adobe Employee
    aanchalsikkaAdobe EmployeeAuthor
    Adobe Employee
    February 15, 2023

    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
      Community Advisor
      Sady_RifatCommunity Advisor
      Community Advisor
      February 15, 2023

      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.

        A
        Adobe Employee
        aanchalsikkaAdobe EmployeeAuthor
        Adobe Employee
        February 16, 2023

        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
          Community Advisor
          Sady_RifatCommunity Advisor
          Community Advisor
          February 16, 2023

          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
            Community Advisor
            Jagadeesh_PrakashCommunity Advisor
            Community Advisor
            February 15, 2023

            @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.

             

             

             

             

              A
              Adobe Employee
              aanchalsikkaAdobe EmployeeAuthorAccepted solution
              Adobe Employee
              February 17, 2023

              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).

                N
                nikita20
                December 30, 2024

                @aanchalsikka :Could you please let me know the example for how you created a separate profile for ui.frontend as I am trying to do the same but it's not working for me. 

                B
                BhavaniBharani
                Level 4
                October 27, 2023

                Hi @3268963chalsika,

                 

                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

                Terms & ConditionsAccessibility statement

                Loading footer...