Minify Rendered HTML in SvelteKit

Table Of Contents

1. Writing The Code ✍️

Svelte-kit doesn't minify the HTML it renders, Yeah!

But there is a way you can do it

I just found out that Svelte-kit doesn’t minify the HTML it renders, this feature was available in Sapper but it is not available in Svelte-kit, however there is a way to do it.😎

The way to do it is by using hooks , A hook in Svelte-Kit is simply a file named hooks.js in your src/ directory.

Writing The Code ✍️

First of all, we need to install the module which is going to minify the rendered HTML so open your terminal and npm install html-minifier, we need to install it as a dependency because, it will be needed by our server when fetch requests are made, However, if you are exporting your Svelte-Kit project using adapter-static, you can use npm i -D html-minifier

Okay in your project folder, open the file src/hooks.js inside your code editor and input the following code inside the file, I will explain below

import { minify } from 'html-minifier'; //Imports the module

const minification_options = {
    collapseBooleanAttributes: true,
    collapseWhitespace: true,
    conservativeCollapse: true,
    decodeEntities: true,
    html5: true,
    ignoreCustomComments: [/^#/],
    minifyCSS: true,
    minifyJS: true,
    removeAttributeQuotes: true,
    removeComments: true,
    removeOptionalTags: true,
    removeRedundantAttributes: true,
    removeScriptTypeAttributes: true,
    removeStyleLinkTypeAttributes: true,
    sortAttributes: true,
    sortClassName: true,
    removeEmptyElements: true
};

export async function handle({ request, resolve }) {
  const response = await resolve(request);

  if (response.headers['content-type'] === 'text/html') {
    response.body = minify(response.body, minification_options); //Minifies the response.body
  }

  return response; //Finally, we return back the response
}

Okay!

The minification_options object holds the various configuration you can apply to the minifier, for more explanation on each option, please visit the npmjs page here.

The handle function is an asynchronous function is available to us since we are using hooks.js. This function runs every time a request is made to the server, thus making it the great place to minify our HTML. According to the docs, it receives the request object and a function called resolve which invokes SvelteKit’s router and generates a response.

In our handle function, we created a response using the resolve function and we passed the request to it as an argument. Then on the next line, we checked the response’s header to see if it is of type html. This checking is important because you wouldn’t want to use html-minifier to minify an object which is not HTML, it might generate an error for you😆

Then on the next line, we accessed the response.body which is the HTML content and passed it to the html-minifier module, it then minifies the contents and assign it back to response.body and delivers the request back to the browser.