origin brotli pre-compression (#57)

increase page-load performance by pre-compressing your static website
content saving up to 70% of bandwith consumption and 80% in Azure
Blob Storage

  - use brotli in the CD pipeline to to compress the static website
    content without losing data
  - upload-batch separaterly per type and also compress json files

|                           | Downloaded Bytes | Document Complete Time | Fully Loaded Time | First Byte | Start Render |
|---------------------------|------------------|------------------------|-------------------|------------|--------------|
| wo/ compression           | 680 KB           | 1.708s                 | 1.829s            | 0.221s     | 0.900s       |
| Blob compression (Brotli) | 202 KB           | 0.797s                 | 0.955s            | 0.208s     | 0.800s       |
| CDN compression (gZip)    | 229 KB           | 0.815s                 | 1.055s            | 0.220s     | 0.800s       |

Pros

  - no size limits when compressing. CDNs limits the size for compression
    files pre-compressed approach avoid performance hit over the edge server
    when caching new content
  - more control over content compression
    freely choose between CDNs without caring about compression support
  - don not wait your CDN profile to implement the new compression tool you
    need. CDN Akamai profile does not support Brotli (Google)
  - save more space in the origin
  - it offers the fastest page load speed

Cons
  - more heavy lifting from the deployment pipeline: tooling + files
    manipulation
  - multiple uploads are required to indicate content type and encoding. It
    is recommended to be implemented along with versioning using directories

solved: #115214

Author: Fernando Antivero

src/ClientApp/azure-pipelines.yml

@@ -37,6 +37,12 @@ stages:
         npx gatsby build
       displayName: 'gatsby build'
 
+    - script: |
+        cd src/ClientApp/public
+        sudo apt-get install brotli --install-suggests --no-install-recommends -q --assume-yes
+        for f in $(find . -type f \( -iname '*.html' -o -iname '*.map' -o -iname '*.js' -o -iname '*.json' \)); do brotli $f -Z -j -f -v && mv ${f}.br $f; done
+      displayName: 'enable compression at origin level'
+
     - script: |
         cd $(Build.SourcesDirectory)
         echo $(docker run --rm -v "$(pwd):/repo" gittools/gitversion:5.0.1-linux-netcoreapp2.1 /repo) > .gitversion
@@ -79,7 +85,11 @@ stages:
           - script: |
               az login --service-principal -u $(azureArmClientId) -p $(azureArmClientSecret) --tenant $(azureArmTenantId)
               # upload content to container versioned folder
-              az storage blob upload-batch -s "$(Pipeline.Workspace)/drop" --destination "\$web\$(releaseSemVer)" --account-name $(azureStorageAccountName)
+              az storage blob upload-batch -s "$(Pipeline.Workspace)/drop" --destination "\$web\$(releaseSemVer)" --account-name $(azureStorageAccountName) --content-encoding br --pattern "*.html" --content-type "text/html"
+              az storage blob upload-batch -s "$(Pipeline.Workspace)/drop" --destination "\$web\$(releaseSemVer)" --account-name $(azureStorageAccountName) --content-encoding br --pattern "*.js" --content-type "application/javascript"
+              az storage blob upload-batch -s "$(Pipeline.Workspace)/drop" --destination "\$web\$(releaseSemVer)" --account-name $(azureStorageAccountName) --content-encoding br --pattern "*.js.map" --content-type "application/octet-stream"
+              az storage blob upload-batch -s "$(Pipeline.Workspace)/drop" --destination "\$web\$(releaseSemVer)" --account-name $(azureStorageAccountName) --content-encoding br --pattern "*.json" --content-type "application/json"
+              az storage blob upload-batch -s "$(Pipeline.Workspace)/drop" --destination "\$web\$(releaseSemVer)" --account-name $(azureStorageAccountName) --pattern "*.txt" --content-type "text/plain"
               # target new version
               az cdn endpoint update --resource-group $(azureResourceGroup) --profile-name $(azureCdnName) --name $(azureCdnName) --origin-path '/$(releaseSemVer)'
               AZURE_CDN_ENDPOINT_HOSTNAME=$(az cdn endpoint show --resource-group $(azureResourceGroup) --name $(azureCdnName) --profile-name $(azureCdnName) --query hostName -o tsv)