Liferay React with Webpack

 

Liferay is using its own bundler called Liferay NPM bundler for the normal build process. This article explains the challenges we faced while developing react portlet with liferay-npm-bundler and how to overcome those using a webpack build.

  Why Liferay using its own bundler (liferay-npm-bundler)

•  Multiple Portlets can be added in a page

In a Portal page we can add multiple application/portlets, The normal bundler like webpack will fail in this case since its designed to have one application in a page. Liferay NPM bundler is designed to support the following features.

• Reuse common module across the page 

 When you have multiple portlets in a page and all this portlet using some common module, liferay npm bundler will allow to load only one common module in the page and share it among the portlets.

• Avoid common module conflict

 Use different version of same module in a page :  It allow you to use 2 version of the same module in a page

• OSGI modular architecture

Liferay follows OSGI modular architecture, modules are interact with each other and share package among them. On the same way liferay uses AMD loader for the JavaScript portlet which ensure the modularity in javascript modules.

Challenges with Liferay NPM Bundler

• JAR  size is too large :

The  jar produced after build process is too large, the bundler will include all the dependencies mentioned in the package.json into the jar file which eventually increase its size.

• Production JS Bundle size is large  - Performance Impact 

The final production ready bundle size is large which may impact the browser load performance.

• Taking long time for build and deployment.

Liferay bundler will rewrite all the JavaScript file in the module and dependencies module in a format that AMD loader can understand. this will cause build and deployment process take longer time to complete.

• Limited scope for optimization of final bundle

• Some third party packages are not supporting

Liferay React with Webpack Configuration

• Create ‘Liferay module project’ from Developer studio using ‘npm-react-portlet’ template.

• Update package.json, script section to remove npm bundler and use webpack

• Create a webpack.config.js file under project root and specify the entry and output path.

• Update com.liferay.portlet.footer-portlet-javascript with the generated JS bundle path in Portlet Class.

   

Performance Metrics

Pros - webpack build with Liferay

• JAR size is small compare to liferay npm

• Build and deployment time is faster

• Bundle size is 2/3rd compared to liferay npm

• Scope for Optimization of bundle

• More stable 
  

Cons - webpack build with Liferay

• No Project ready template, gradle customization required

• Cannot use when to add multiple react  portlet in  page

• Project creation, build and deployment to be done from Liferay developer studio

• Liferay Configurations are not available by default. 

   

About Author:

I am Deepak Poilil, working as a Liferay Consultant. Having 12 plus year of experience as a software developer, I love design, development and architecture enterprise application using JAVA and JavaScript technologies. Our primary focus to deliver enterprise application with best user experience using the latest technologies and skills currently available in the Market. I always focus on 4 parameters while developing web and system applications, robustness, scalability, reusability and performance.Read More...