How to Compress (Gzip) Angular Build and Deploy to AWS S3

I will show you how to gzip angular prod build using a gzipper CLI library and deploy it AWS S3 bucket without cloud front.By this technique you will see around 70% reduction in build size.

I saw many articles which will show you how to do gzip compression using a web server like Nginx on the fly but for gzip compression on AWS, we need to use cloud front service. for cost-cutting, I avoided using cloud front service. here we going to use static compression.

Dynamic vs Static Compression:

Dynamic compression means compressing files on the fly whereas static means to compress files once and then serve every time from cache or storage like (S3 Bucket). We are using static compression for our Javascript, HTML & CSS files, as those will not change (until a new build is deployed)

Build

1. Install gzipper CLI

npm i gzipper -g

2. Add this command to package.json scripts section.

"gzip": "rm -rf ./dist/*-gzip && gzipper --verbose --output-file-format [filename].[ext] ./dist/real-world-project ./dist/real-world-project-gzip"

Basically this command will remove old gzip build and creates new build in ./dist/project-name-gzip directory.

In my case the project name is real-world-project. Don’t forget to replace the real-world-project with your project name.

3. Create Build & Compress It

ng build --prod
npm run gzip

The above command will create another gzip-compressed build inside .dist/project-name-gzip

you can also combine these two commands in one command come something like this. (optional)

"build-gzip" : "ng build --prod && rm -rf ./dist/*-gzip && gzipper --verbose --output-file-format [filename].[ext] ./dist/real-world-project ./dist/real-world-project-gzip"

That's it. now you are good to go for deployment.skip some steps if you have already created S3 bucket and set up for static hosting.

Deployment

1. Create S3 Bucket

create s3 bucket

Uncheck to make it public

2. Upload gzip-compressed build & Add a meta tag

uploading gzip-compressed build which presents inside ./dist/real-world-gzip

grant public access to the bucket

keep it default

Don’t forget to add Header

Don’t forget to add Header Content-Encoding gzip otherwise it won’t work.

3. Configure S3 Bucket for static hosting

Results:

Now visit your site and check the network you will definitely see the difference.

Let me know if this was worth your time by throwing claps. If you’d like to get updates, follow me on Twitter and Medium. If anything is not clear or you want to point out something, please comment down below.

Read about How OYO uses Brotli Compression

Brotli vs Gzip Compression. How we improved our latency by 37%