Nodejs: Optimize With Gulp and Brotli

Make a custom build pipeline for minifying and compressing your assets

An important factor that affects the performance of a website is the size of resources requested by the browser. CSS and JavaScript source files are among the top of these resources. If you do not handle them efficiently, they can considerably increase page load time. Get the app repo here.

What you will get from this piece?

In this article, we’re going to build a server-rendered application in Nodejs by implementing:

• Asset minification and compression using Gulp and Brotli.
• A development environment where assets are minified and compressed in real-time.
• A build process that can make distributable assets for deployment.

Also, you will get some familiarity with Gulp and Brotli. If your app is not server-rendered or performance is not an issue for your application then this article may not be very informative to you.

Setting up the Application:

Make a new directory, initialize npm, and install express and handlebars:

npm i express express-handlebars

Create a basic express server with handlebars configured as the templating engine.

On line 15 of app.js we are setting dist as the static directory for our app. This dist directory will be automatically generated from Gulp. Add a views directory in the root of your project and create main.hbs layout for our application. Put HTML boilerplate in this template.

Add some assets:

In order to minify and compress assets, we need assets. Let’s create a folder assets in the root of the project, and add some CSS and JS files. The app folder structure will look like this:

my-app
├── assets
│   └── css
│       └── styles.css
│   └── js
│       └──…