I want to serve my Ionic React v6 app as a PWA.
To do so, I’m using the following command:
ionic build --no-source-map --engine=browser
I take the resulting files and put them in the /pwa directory on my server, and then link to the app from the main website (which is running Drupal 10) as /pwa/index.html.
This works, but the Ionic app is served without any compression, so it’s over 2 MB. When I run Google Lighthouse, it says that this can be compressed 60% or more by using Brotli/gzip.
How can I do that when building with Ionic? ionic help build doesn’t seem to offer any clues.
This is not a question of the build process for the app. The compression happens when the server delivers the results of your build process. So, enabling the compression depends on your setup. What server the /pwa directory is delivered by? Is it apache, nginx or is it something completely different?
Compression should be enabled in the configuration of the (virtual) host in the corresponding server that delivers your PWA. But I think, parts of this configuration might interfer or overlap with configuration for SSL.
So, if you provide information about that part of your setup, it might get easier to help.
Thanks for writing back. Since Ionic apps are a set of static JS/CSS files, I think compression can be handled in the build process-- why have the server compress files dynamically when you can do it once during build?
In my particular case, the server configuration is a bit complicated-- it’s an nginx server hosting Drupal 10, and I have one isolated file mount that has the Ionic files.
I solved this with compress-create-react-app, which provides brotli compression with a gzip backup.
After installation compress-create-react-app, you can build the Ionic React PWA like this: react-scripts build && compress-cra
If this does the trick and is correctly represented in the lighthouse analysis results that might be even better. I just didn’t think of it, because for other stuff, the server configuration is the standard way. For example, when delivering a Drupal frontend, the html that gets delivered, will be generated on demand and is therefore hard to compress statically.
Yes, Lighthouse likes this approach, and even more importantly, it shrinks the file size dramatically and reliably with no further effort on the part of the server.
Drupal HTML can be pseudo-compressed with the Minify Source HTML module or, if you’re really ambitious, Tome if you want a partially static site or Gatsby if you want to go full static.