How to speed up your next js app using GZip

Recently I was working on one of my projects built using nextjs . I was using semantic UI library. Even the minified version is too big for production. (631kb) It was making my web app slow. I searched through the internet for ways to reduce the size. Then I found out about gzip. I can encode my web app using gzip which reduced the size of the app significantly. Let’s see how to do it.

What is needed on the prod server?

We need a reverse proxy. I was using NGINX. If we are serving static file from Nodejs server (express or koa) then we need to configure our nodejs server to serve gzip first if client browser supports gzip else server simple file

Steps

Configure webpack to create gzip files.
Configure NGINX to serve gzip content.

Step 1

We need to install a package compression-webpack-plugin.
Go to next.config.js and add this plugin.

 config.plugins.push(
      new CompressionPlugin({
        test: /\.js$|\.css$|\.html$/,
      }),
    );

The whole file will look like this

const withSass = require(‘@zeit/next-sass’);
const withCSS = require(‘@zeit/next-css’);
const CompressionPlugin  = require(‘compression-webpack-plugin’)
const nextConfig = {
  onDemandEntries: {
    // period (in ms) where the server will keep pages in the buffer
    maxInactiveAge: 50 * 1000,
    // number of pages that should be kept simultaneously without being disposed
    pagesBufferLength: 5,
  }
}
module.exports = {
  …withCSS(withSass({
  target: ‘serverless’,
  webpack (config) {
    config.module.rules.push({
      test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/,
      use: {
        loader: ‘url-loader’,
        options: {
          limit: 8192,
          publicPath: ‘/_next/static/‘,
          outputPath: ‘static/‘,
          name: '[name].[ext]'
        }
      }
    })
    config.plugins.push(
      new CompressionPlugin({
        test: /\.js$|\.css$|\.html$/,
      }),
    );
    return config;
  }
})
),
...nextConfig
}

Now you will see when you build your project, you will get bundle.js.gz
Now you only have to configure your NGINX Reverse proxy to serve .gz file first.

Step 2

NGINX

Run vim_etc_nginx_sites-available_default .
Add the below code in your server.

        # gzip config
        gzip on;
        gzip_static on;
        gzip_types text/plain text/css application/json     application/x-javascript text/xml application/xml application/xml+rss text/javascript;
        gzip_proxied  any;
        gzip_vary on;
        gzip_comp_level 6;
        gzip_buffers 16 8k;
        gzip_http_version 1.1;
        #

Now restart NGINX sudo systemctl restart nginx.
Thats it you are done !

Nodejs server

In Express js we use app.use(express.static('public')). It only serves uncompressed files..To serve Compressed gzip file first we need to use express-static-gzip
In Koa js , by default koa-static try to serve gzip file first.

How to speed up your next js app using GZip

Comments

More from this blog

Migrating From Vue 2 to Vue 3: A Practical Checklist With Examples

Daily Learnings

Migrating your project to AWS IOT device sdk v2

Reactjs in Vuejs using Module Federation (inc Routing)

How To Submit A Pull Request On Github ?

What is needed on the prod server?

Steps

Step 1

Step 2

NGINX

Nodejs server

Command Palette

Comments

More from this blog

What is needed on the prod server?

Steps

Step 1

Step 2

NGINX

Nodejs server