search

victronenergy / venus-html5-app

HTML5 App including Javascript library that communicates with Venus OS over MQTT websockets
MIT License
103 stars 33 forks source link

bug: `npm run build` produces non functioning app... #370

Open mman opened 6 months ago

mman commented 6 months ago

One of the recent commits https://github.com/victronenergy/venus-html5-app/commit/9bb36644b1cc08c280104f1b8cad9b90907afd50 that I assume was supposed to reduce disk space and network traffic went wrong and broke the build.

Building the HTML5 app uses https://github.com/webpack-contrib/compression-webpack-plugin as a last step to compress files exceeding certain size.

The plugin works in a way where during the npm run build it leaves original files produced by webpack in place, and produces a .gz versions of all files that exceed the threshold specified in webpack config:

https://github.com/victronenergy/venus-html5-app/blob/9bb36644b1cc08c280104f1b8cad9b90907afd50/config/webpack.config.js#L687-L690

When using deleteOriginalAssets: true the plugin actually removes the uncompressed original files as they are not actually needed on the server

So a directory produced with deleteOriginalAssets: false:

-rw-r--r--  1 mman  staff  1423307 May 21 11:42 60.96569f9e.js
-rw-r--r--  1 mman  staff     2881 May 21 11:42 60.96569f9e.js.LICENSE.txt
-rw-r--r--  1 mman  staff   421274 May 21 11:42 60.96569f9e.js.gz
-rw-r--r--  1 mman  staff   160371 May 21 11:42 main.c742e74d.js
-rw-r--r--  1 mman  staff     1818 May 21 11:42 runtime-main.17566f78.js

Will look like this when deleteOriginalAssets: true is used:

-rw-r--r--  1 mman  staff   421274 May 21 11:42 60.96569f9e.js.gz
-rw-r--r--  1 mman  staff   160371 May 21 11:42 main.c742e74d.js
-rw-r--r--  1 mman  staff     1818 May 21 11:42 runtime-main.17566f78.js

This all looks nice and shiny, until we realise there is

Problem 1: LICENSE.txt file gets deleted as well

We can see that it not only deleted the original .js file, but it also accidentally got rid of the .js.LICENSE.txt file that gets shipped along... This is probably a bug in the CompressionPlugin.

Problem 2: Deleted original .js file does not get injected into index.html

There seems to be a race condition between the CompressionPlugin and the HtmlWebpackPlugin where HTMLWebpackPlugin does not properly inject required .js files into the index.html when they are removed by the CompressionPlugin. This should not happen as CompressionPlugin is mentioned last in our webpack.config but it does happen.

The result is that running either the npm run build or npm run start both result in an empty HTML5 app...

Screenshot 2024-05-21 at 11 25 04

Simple fix is to revert the commit https://github.com/victronenergy/venus-html5-app/commit/9bb36644b1cc08c280104f1b8cad9b90907afd50.

More complex fix is to figure out how to make CompressionPlugin play well with HtmlWebpackPlugin.

mman commented 6 months ago

The original commit here https://github.com/victronenergy/venus-html5-app/commit/793fc13294fac534fbaf755f4a815bf7e4f43305 was supposed to enable WebpackCompressionPlugin. However WebpackCompressionPlugin seems to be broken and does not play well with HtmlWebpackPlugin when deleteOriginalAssets: true.

I have filed two related bugs here:

https://github.com/webpack-contrib/compression-webpack-plugin/issues/390

https://github.com/webpack-contrib/compression-webpack-plugin/issues/389

mman commented 6 months ago

I have temporarily fixed this by reverting the original commit, here: https://github.com/victronenergy/venus-html5-app/commit/bea62d00544e92af1b56017bf666228046868d7a, leaving open for investigation how to properly implement gzip + delete