1. Home
  2. Portal
  3. RE: Gradle and Babel - Build optimisation for NPM React Portlet

RE: Gradle and Babel - Build optimisation for NPM React Portlet

Nils Wilmet, modified 6 Years ago.
Gradle and Babel - Build optimisation for NPM React Portlet
New Member Posts: 20 Join Date: 4/24/19 Recent Posts
Hi everyone !I'm currently testing a NPM React Portlet built with the Liferay IDE for Eclipse.  Everything went well and i managed to install some NPM packages.The problem is about Babel : during the Gradle build, the "npmRunBuild" task (that includes Babel process) is taking a lot of time.
And by "a lot" i'm talking about almost 20 minutes, at each build.
I tried ignoring node_modules in .npmbundlerc and .babelrc but it seems that it doesn't do anything...
During those 20 minutes, all I can see are lines like these : 
- [BABEL] Note: The code generator has deoptimised the styling of "C:/Users/StagiaireONE/liferayWCool/agiir-ressource/build/resources/main/META-INF/resources/node_modules/lodash@4.17.11/lodash.js" as it exceeds the max of "500KB".
- Babel failed processing reactstrap@7.1.0/src/UncontrolledPopover.js: it will be copied verbatim (see report file for more info)

Is there a way to optimize the npm build ? Or maybe i'm not writing ignoring rules the correct way ?

Thanks a lot !
thumbnail
Christoph Rabel, modified 6 Years ago.
RE: Gradle and Babel - Build optimisation for NPM React Portlet
Liferay Legend Posts: 1555 Join Date: 9/24/09 Recent Posts
I have published a little sample project based on Webpack here:
It works quite well. Maybe there are some useful hints in there, although it is no portlet. But it shouldn't make a difference, since the issue isn't about java code.
https://github.com/dccs-liferay/webpack-example
Which workspace version do you use/for which Liferay version do you develop? Which node version?  Have you tried to build it directly using something like "npm run prod"? I mean, just the javascript code. Is it faster then?
Some of my colleagues on Windows often had build issues too. Sometimes builds took forever. We tracked one of the issues down to the virus scanner. Maybe you could try to disable it for some tests?
Nils Wilmet, modified 6 Years ago.
RE: Gradle and Babel - Build optimisation for NPM React Portlet
New Member Posts: 20 Join Date: 4/24/19 Recent Posts
Hi Christoph,Thanks for your reply and your Github project, i'll try that as soon as possible and compare configurations and so on.

I'm developing for Liferay 7.1, on Eclipse 4.12.0 and Liferay IDE 3.6.2. For Node, i'm on 10.16.2 and npm on 6.9.0
It's a portlet built with the Liferay IDE, i don't know that "npm run prod" will do anything, because the JS Code is processed by Babel, and loaded inside a Java/JSP portlet with the Liferay AMD Loader. It's that Babel process that takes so much time...I tried with two computers : one with an antivirus and another one only with Windows Defender, there wasn't any difference.
I thought of Gradle and I would like to modify the tasks or at least read them. Is it possible ?
Thanks again
thumbnail
Christoph Rabel, modified 6 Years ago.
RE: Gradle and Babel - Build optimisation for NPM React Portlet
Liferay Legend Posts: 1555 Join Date: 9/24/09 Recent Posts
Please note that Liferay uses its own node/npm version. I set it explicitly to my installed versions. No idea what the defaults are. Maybe you could try to set it explicitly to the versions you use. (Note: The Ubuntu default version (some 10.x version) of node crashes all the time for me, older and newer versions work quite fine, so if you are on Linux, it might be worthwhile to try another version).
node.nodeVersion = "10.16.2"
node.npmVersion = "6.9.0"
I am not really familiar with the normal Liferay build since we have our own build process based on webpack. Maybe you could try to run the blade/build process from the commandline with the --debug flag. It should give you a better idea where it is stuck. Maybe it is downloading node all the time and very slow at that? Is it really the node build call?
Nils Wilmet, modified 5 Years ago.
RE: Gradle and Babel - Build optimisation for NPM React Portlet
New Member Posts: 20 Join Date: 4/24/19 Recent Posts
Hi ! Just a quick bump !

I tried with NVM and different versions of Node, it didn't change a lot. But I moved my Liferay folders on a SSD and, of course; it did the trick, but it still hangs for a moment. I'll add more informations  in this thread if I ever find something more efficient emoticon
Thanks again