SERIES
AdonisJS Quick Tip
-
1.0Getting Data by the User's Timezone with Luxon's DateTime05:544:32
-
2.0Debugging, Inspecting, and Freezing Code Execution11:163:36
-
3.0How To Add AdonisJS Edge Support to your WebStorm Environment01:521:18
-
4.0How To Add TailwindCSS to a New AdonisJS Project04:485:14
-
5.0How To Serialize All AdonisJS Lucid Model Properties As Camel Case06:234:55
-
6.0How To Add A Global Property To Your HttpContext in AdonisJS 508:528:37
-
7.0How To Add A Custom Method to the Model Query Builder in AdonisJS09:504:31
-
8.0How To Make Your AdonisJS Authentication Login Case-Insensitive06:003:21
-
9.0Http Method Spoofing & Helper Components in AdonisJS09:174:29
-
10.0How To Use Vue 3 with TypeScript in an AdonisJS Project10:136:55
-
11.0How To Create Your Own Global Helpers in AdonisJS08:189:43
-
12.0Minify Your AdonisJS HTML in 5 Minutes06:231:03
-
13.0How To Redirect Back to the Previous Page After Login with AdonisJS03:043:41
-
14.0Remember Me in AdonisJS Authentication04:130:26
-
15.0How To Seamlessly Share AdonisJS Sessions & Authentication Across Subdomains04:230:12
-
16.0Exploring My Favorite AdonisJS Model Query Builder Macros: Tips and Examples09:241:59
AdonisJS Quick Tip
Minify Your AdonisJS HTML in 5 Minutes
06:23 Watch
1:03 Read
We'll learn how we can alter all our AdonisJS HTML response bodies using a simple global middleware to add HTML minification.
🔗 HTML Minifier Package: https://github.com/kangax/html-minifier
🕑 Chapters
- What's The Default Behavior
- Install HTML Minifier
- How To Alter Response Body
- HTML Minfier Middleware
- Inspecting What It's Doing
- Limiting Middleware Execution
- Testing Our HTML Minification Middleware
- Outro
1. Install HTML Minifier Package
npm i html-minifier
2. Create HTML Minfier Middleware
node ace make:middleware HtmlMinifier
2. Register Global Middleware
// start/kernel.ts
Server.middleware.register([
() => import('@ioc:Adonis/Core/BodyParser'),
() => import('App/Middleware/HtmlMinifier')
])
3. HTML Minifier Middleware
import type { HttpContextContract } from '@ioc:Adonis/Core/HttpContext'
const minify = require('html-minifier').minify
export default class HtmlMinifier {
public async handle({ request, response }: HttpContextContract, next: () => Promise<void>) {
// BEFORE NEXT: altering, authorizing, preparing request
await next()
// AFTER NEXT: altering response
const method = request.method()
const accepts = request.accepts([]) ?? [] as string[]
const isXml = request.url().endsWith('.xml')
// if not GET request or doesn't expect HTML or is XML, then exit
// since await next() already ran, we're safe to just return here to exit
if (method !== 'GET' || !accepts.includes('text/html') || isXml) {
return
}
// get the minified HTML of our current response body
const minifiedBody = minify(response.getBody(), {
minifyCss: true,
minifyJs: true,
removeComments: true,
collapseWhitespace: true
})
// set minfied HTML as new response body
response.send(minifiedBody)
}
}
Comment
Prepared By
Tom Gobich
Burlington, KY
Owner of Adocasts, JavaScript developer, educator, PlayStation gamer, burrito eater.
Visit Website