React: Compress en.model.json

[adf33avs]

Fetching the en.model.json is around 3MB causing long initial load times for the app.

I see the "Accept-Encoding" request header allows: gzip, deflate, and br.  I'd like to add "Content-Encoding": "br" to the request to compress the text, but I see the request is handled by aem-spa-page-model-manager.  Is there anyway around this? 

We want to keep the structure depth the same, so reducing that to reduce the json is not an option. 

[Ekhlaque · Accepted solution]

Hi @adf33avs ,aem-spa-page-model-manager does not support "Content-Encoding" with "br" out of the box.

Here's I am sharing high-level approach which can help you to achieve this:

->Create a custom implementation of the Page Model Manager by extending the aem-spa-page-model-manager.In your custom implementation, modify the logic to handle the Accept-Encoding header and include support for "Br" if the client supports it.

->Package your custom implementation as an OSGi bundle and deploy it to your AEM environment. In the SPA editor configuration for your project, specify the custom page model manager service PID so that your custom implementation is used instead of the default aem-spa-page-model-manager.

[aanchal-sikka]

Hello @adf33avs 

Have you tried using https://httpd.apache.org/docs/2.4/mod/mod_deflate.html 

Web server, which also hosts the dispatcher, can perform compression in real-time if you configure it accordingly. For instance, using `mod_deflate` for Apache HTTPD can enable this feature. Implementing compression on-the-fly does not adversely affect the site's performance, and it also benefits cached files by applying compression.

However, it's essential to understand that any HTTP client will handle compression and decompression automatically. Consequently, the files stored in the dispatcher cache will remain uncompressed.

The mod_deflate module provides the DEFLATE output filter that allows output from your server to be compressed before being sent to the client over the network.