How to serve Gziped webpack bundles from AWS S3

Question

I need to serve a webpack bundle (and derived assets) from AWS S3, and I want to serve those files Gziped if the browser supports it. S3 doesn't Gzip content on-the-fly, so you have to upload both uncompressed and compressed versions of your assets and implement the logic to select the corresponding version from client side.

Now, when I serve the html page from my server, I can choose to load the main.bundle.js file or its compressed version main.bundle.js.gz, depending on the Accept-encoding header in the request.

The problem is that webpack doesn't know anything about the Gziped version of my assets, so it keeps loading the rest of the bundle chunks with their uncompressed files.

Is there a way to tell webpack to load the bundle chunks and other files appending a suffix to their paths (in this case .gz)?

The only solution I can think of is to generate two separate bundles, one for uncompressed files and the other one for the gziped ones, with different publicPath to differentiate them. But I think it might be an overkill, as the two bundles would be practically identical.

Any thoughts?

Thanks!

Answer 1

If you enable CloudFront on the S3 bucket, they recently (12/17) just added the option to gzip. See: https://aws.amazon.com/blogs/aws/new-gzip-compression-support-for-amazon-cloudfront/