How to speed up webui npm build?

Development IDE & Build
1

During building some webui bundles, it often pauses here:

[INFO] --- frontend:1.13.4:npm (npm run build-prod) @ org.openhab.ui ---
[INFO] Running 'npm run build-prod' in /home/jimmy/Projects/openhab-webui/bundles/org.openhab.ui/web
[INFO] 
[INFO] > openhab@4.0.0 build-prod
[INFO] > cross-env NODE_ENV=production node ./build/build.js
[INFO] 
[INFO] - building for production...

Is there a way to make this go faster?

My command is just:

mvn install -pl :org.openhab.ui

@stefan.hoehn

2

Add the switch -T (e.g. -T 2C)

3

Thanks! I know that applies to mvn, but does it also apply to the npm build that was invoked by mvn?

4

Umm. Probably not.

5

I don’t think that can be speed up much.

I have just checked the GitHub actions logs, the upgrade from webpack 4 to 5 did not really speed up the UI build.

I honestly haven’t checked that closer; but after the first local UI build the following ones should be a bit faster since all dependencies are already installed and shouldn’t have been removed unless you use the clean command with mvn.

6

In order to speed up the build you probably need to have a look on Vite. It is being said to be faster during development due to different strategy used for code swapping. Disclaimer - I am not a web developer hence I am not sure if it gives any significant boost with web-bundling itself. :wink:

7

There are faster alternatives to npm but they aren’t as popular:

https://romanglushach.medium.com/comparing-npm-yarn-and-pnpm-package-managers-which-one-is-right-for-your-distributed-project-to-4d7de2f0db8e

8

I previously rebuilt the bundle jar, install it to my live openhab instance and test my changes that way, but that’s wayyyy too slow.

I have since discovered I could run npm start and it proxies through to my live openhab instance that way, and I get instantaneous update as I changed the source code!

9

Yes using npm start (see CONTRIBUTING) is definitely the most efficient workflow when doing UI development.

If you just want to build everything for a local build it doesn’t really help. In that case you can also just let Maven download the SNAPSHOT version build by Jenkins.

If you don’t want to depend on the Jenkins build and always want to build it yourself it may be time to get some faster hardware. :wink:

10

The dev server provides some other huge benefits as well:

  1. usable stack traces for errors, as the code is not minimized
  2. Vue dev tools can be used, which is really great for debugging, e.g. you can access the computed properties of a Vue component, modify its data etc.

This is also described in the already linked CONTRIBUTING file.

11

Yarn could speed up the depedency installation, but should not improve build times.
As Lukasz said, Vite could improve the build times, it is said to be reallly fast, but since normally only CI does real UI builds and the webpack dev server is also really fast, I don’t see a benefit in using Vite that would convince me in spending my time in changing the build system.

12

Just to make to more elaborate to the reader, this is how it can be done (and I do it)

cd /pathto/openhab-webui/bundles/org.openhab.ui/web
OH_APIBASE=http://mylocalipforopenhab:8080/ npm start
Browser: http://localhost:8080/