Gzip compression with CloudFront doesn't work

Question

I have an angular app which, even builded with prod mode, has multiple large files (more than 1MB).

I want to compress them with gzip compression feature present on CloudFront.

I activated "Compress Objects Automatically" option in CloudFront console. The origin of my distribution is a s3 bucket.

However the bundle downloaded when I'm loading the page via my broswer are not compressed with gzip

here's an example of an request/response

Request header :

:authority:dev.test.com
:method:GET
:path:/vendor.cc93ad5b987bea0611e1.bundle.js
:scheme:https
accept:*/*
accept-encoding:gzip, deflate, br
accept-language:fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4
cache-control:no-cache
pragma:no-cache
referer:https://dev.test.com/console/projects
user-agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

Response header

accept-ranges:bytes
age:17979
content-length:5233622
content-type:text/javascript
date:Tue, 07 Nov 2017 08:42:08 GMT
etag:"6dfe6e16901c5ee5c387407203829bec"
last-modified:Thu, 26 Oct 2017 09:57:15 GMT
server:AmazonS3
status:200
via:1.1 9b307acf1eed524f97301fa1d3a44753.cloudfront.net (CloudFront)
x-amz-cf-id:9RpiXSuSGszUaX7hBA4ZaEO949g76UDoCaxzwFtiWo7C-wla-PyBsA==
x-cache:Hit from cloudfront

According to the AWS documentation everything is ok :

• Accept-Encoding: gzip
• Content-Length present
• file between 1,000 and 10,000,000 bytes
• ...

Have you an idea why cloudfront doen't compress my files ?

Answer 1

This response was cached several hours ago.

age:17979

CloudFront won't go back and gzip what has already been cached.

CloudFront compresses files in each edge location when it gets the files from your origin. When you configure CloudFront to compress your content, it doesn't compress files that are already in edge locations. In addition, when a file expires in an edge location and CloudFront forwards another request for the file to your origin, CloudFront doesn't compress the file if your origin returns an HTTP status code 304, which means that the edge location already has the latest version of the file. If you want CloudFront to compress the files that are already in edge locations, you'll need to invalidate those files.

http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/ServingCompressedFiles.html

Do a cache invalidation, wait for it to complete, and try again.

http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Invalidation.html

Answer 2

Dynamic GZip compression is handle by CloudFront in best effort basis. Based on the capacity and availability in edge locations.

To get predictable compression, you need to gzip them before uploading to S3.