I strongly suspect that this crippling performance hit on a Raspberry Pi 4 has to do with how the NPM library “image-webpack-loader” gets used. It in turn calls “imagemin”. Imagemin performs the “wonderful” service of “Minify images seamlessly”.
It seems Mattermost is transparently compressing the images, before storing them! But formats like .jpg, .gif, and .png are already (internally) compressed. How does that make any sense? Spending all those CPU cycles, just to save like 1% off the file size? Please, say it ain’t so!
Please, can anyone explain how this transparent compression of images can be disabled?
Mattermost devs, could there please be a radio button for this, in the Mattermost System Console, or even a variable in config.json (which I don’t mind hand-editing)?
In image-webpack-loader (see link above), there is an option to “disable” it, but how to gracefully do this disabling, without hand-compiling all of Mattermost from source?
> In your webpack.config.js, add the image-loader, chained after the file-loader:
>
> rules: [{
> test: /\.(gif|png|jpe?g|svg)$/i,
> use: [
> 'file-loader',
> {
> loader: 'image-webpack-loader',
> options: {
> bypassOnDebug: true, // webpack@1.x
> disable: true, // webpack@2.x and newer
> },
> },
> ],
> }]
If you don’t believe me (that re-compressing .gifs, .jpgs, and .pngs is a bad idea), then please try compressing a few .gifs, .jpgs and .pngs laying around on your computer for yourself, and you’ll see that I’m not kidding.
.svg, OTOH, is not compressed by default. It makes sense to compress pretty much this image format only, as it just contains a bunch of XML text (which is very compressible).
The test above could intelligently call image-webpack-loader just for the .svgs, but then also disable image-webpack-loader, for the .jpgs, .pngs, and .gifs
Edit:
Yes indeed, in the source tree (v5.21.0), look at mattermost-webapp/webpack.config.js. Compression is turned on for those already-compressed file formats, see starting from line 196:
{
test: /\.(png|eot|tiff|svg|woff2|woff|ttf|gif|mp3|jpg)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'files/[hash].[ext]',
},
},
{
loader: 'image-webpack-loader',
options: {},
},
],
},