How to gzip and deploy your front end assets to Amazon S3 with Webpack
Tags: amazon, tip, go, beginners
Published: 2018-06-18 14:49:31

---
title: How to gzip and deploy your front end assets to Amazon S3 with Webpack
published: true
description: 
tags: #amazon #tip #go #beginner
---
Gzipping your front end assets is a great way to drastically decrease their file size, and thus improve the overall page load time. If you're using Amazon S3 to host these assets, here's a simple way to add gzipping and front end deployment to your production build step.

Follow [this tutorial](https://webpack.js.org/guides/getting-started/) to get a basic Webpack environment set up, if you haven't already.

You'll need two Webpack plugins for this tutorial:

[Compression Plugin](https://github.com/webpack-contrib/compression-webpack-plugin)
and
[S3 Plugin](https://github.com/webpack-contrib/s3-plugin-webpack)

Install the plugins like so:

`npm install --save-dev compression-webpack-plugin webpack-s3-plugin`

Import the plugins at the top of your Webpack config file:

`const CompressionPlugin = require('compression-webpack-plugin');
const S3Plugin = require('webpack-s3-plugin');`

Next, we're going to initialise the compression plugin. In the below example, the plugin will apply to all Javascript and CSS files. New gzipped files are created in the same directory with the suffix `.gz`, and the original files are removed. Click [here](https://github.com/webpack-contrib/compression-webpack-plugin) for more plugin options.
```
module.exports = {
  ...,
  plugins: [
    new CompressionPlugin({
      test: /\.(js|css)$/,
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      deleteOriginalAssets: true
    })
  ]
}
```
After the CompressionPlugin config, we'll initialise the S3 plugin:
```
module.exports = {
  ...,
  plugins: {
    new CompressionPlugin({
      test: /\.(js|css)$/,
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      deleteOriginalAssets: true
    })
    new S3Plugin({
      s3Options: {
        accessKeyId: 'your-access-key', // Your AWS access key
        secretAccessKey: 'your-secret-key', // Your AWS secret key
        region: 'eu-west-1' // The region of your S3 bucket
      },
      s3UploadOptions: {
        Bucket: 'my-bucket', // Your bucket name
        // Here we set the Content-Encoding header for all the gzipped files to 'gzip'
        ContentEncoding(fileName) {
          if (/\.gz/.test(fileName)) {
            return 'gzip'
          }
        },
        // Here we set the Content-Type header for the gzipped files to their appropriate values, so the browser can interpret them properly
        ContentType(fileName) {
          if (/\.css/.test(fileName)) {
            return 'text/css'
          }
          if (/\.js/.test(fileName)) {
            return 'text/javascript'
          }
        }
      },
      basePath: 'my-dist', // This is the name the uploaded directory will be given
      directory: 'public/dist' // This is the directory you want to upload
    })
  }
}
```
Click [here](https://github.com/webpack-contrib/s3-plugin-webpack) for more S3 plugin options.

With your Webpack config set up, running webpack will gzip your assets, and upload your dist folder to your S3 bucket.