Compressing a flutter web app to either Azure Static Web App or static website which is hosted on blob storage

Anonymous
2023-01-04T10:41:46.873+00:00

Hello,

We are trying to figure out, which is they way to go, and how to compress a flutter web app, that has to be opened in a webview in xamarin or in the browser.

We want the flutter web app, to be compressed as gzip or any other available compression (br compression?) , but we are having trouble figuring out, what the right way to go, and what the optimal setup would be to do it and has it send with that form of encoding.
We also have a lot of other resources in it, such as fonts and png's; Are there any recommended caching strategies for this scenario?

Right now, we have it hosted on a static website which is on blob storage from azure with a azure CDN on it, but we have had multiple failed attempts to have et send as gzip compressed.

We have also looked in (but not tested) to host it as an Azure Static Web App.

Which would be the optimal setup, and how do we actually setup, so that the files are compressed and send over the cdn or other?

TLDR; How do we achieve the best performance, for a flutter web app ( As js) hosted on azure ( regards to caching strategy and compression) ?

Azure Blob Storage
Azure Blob Storage
An Azure service that stores unstructured data in the cloud as blobs.
2,578 questions
Azure Content Delivery Network
0 comments

2 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Takahito Iwasa 4,841 Reputation points MVP
    2023-01-04T11:39:34.203+00:00

    Hi, @Anonymous

    In terms of the CDN layer, I think you can automatically serve compressed objects in one of the following ways:

    Can you tell me how you are failing?
    CDN content compression usually requires the client to provide her Accept-Encoding in the request header, create the response in compressed form accordingly, and perform decompression on the client side.

  2. Anonymous
    2023-01-04T13:24:56.177+00:00

    Hi, @Takahito Iwasa , thanks for you answer!

    We've stored the files like this, on an azure blob static website:
    276090-image.png

    with this static website configuration:
    276059-image.png

    Coupled with a CDN that has compression turned on:
    276040-image.png

    And caching like:
    276113-image.png

    However, as you responded, when accept-encoding in the request header is set to, per example like this in chrome:
    276122-image.png

    It is still not compressed the data that is send over the CDN as seen the main.dart.js have the same file size, as the one on the blob.
    276074-image.png

    We are trying to figure out, what the missing link is, to this not being compressed appropriately, even though the accept-encoding header is set to gzip, per example

    0 comments