Verbeter je Astro project: pas HTML bestanden aan na het bouwproces

Seppe Gadeyne

Als freelance webdeveloper met expertise in het optimaliseren van website prestaties, ben ik gespecialiseerd in het creëren van snelle en vindbare websites.

Freelance webdeveloper

Als Astro ontwikkelaars zijn we altijd op zoek naar manieren om onze websites te optimaliseren en de prestaties te verbeteren. In deze blogpost laat ik je een script zien waarmee je de door Astro gegenereerde HTML bestanden kunt aanpassen na het bouwproces. Dit script voegt niet alleen ID's toe aan heading tags, maar verkleint ook de HTML, waardoor je website sneller en toegankelijker wordt. Laten we erin duiken!

Inhoudsopgave

1. Aan de slag

2. Afhankelijkheden installeren

3. Het process-html.mjs script

4. Bijwerken van package.json

5. Conclusie

Aan de slag

Zorg voordat je kunt beginnen dat je de volgende vereisten op je systeem hebt geïnstalleerd:

• Node.js (versie 16.12.0 of hoger)

• Astro (versie 2.0.0 of hoger)

Afhankelijkheden installeren

Ons script is afhankelijk van drie pakketten: 'globby', 'html-minifier' en 'jsdom'. Installeer ze door het volgende commando uit te voeren:

npm install globby html-minifier jsdom

Het process-html.mjs script

Maak een nieuw bestand met de naam process-html.mjs in de hoofdmap van je Astro project. De onderstaande code is aangepast voor statische implementaties op Vercel. Als je een andere uitvoer folder gebruikt, pas dan de path variabele aan.

import fs from 'node:fs/promises'
import { globby } from 'globby'
import { minify } from 'html-minifier'
import { JSDOM } from 'jsdom'

// Haal alle HTML-bestanden op uit de uitvoer folder
const path = './.vercel/output/static'
const files = await globby(`${path}/**/*.html`)

await Promise.all(
    files.map(async (file) => {
   	 console.log('Processing file:', file)
   	 let html = await fs.readFile(file, 'utf-8')

   	 // Voeg ID's toe aan h2, h3 en h4 tags
   	 const dom = new JSDOM(html)
   	 const headings = dom.window.document.querySelectorAll('h2, h3, h4')
   	 for (let i = 0; i < headings.length; i++) {
   		 const heading = headings[i]
   		 const text = heading.textContent
   		 const id = text
   			 .trim()
   			 .replace(/[\s.,?:]+/g, '-')
   			 .replace(/-+$/, '')
   			 .toLowerCase()
   		 heading.setAttribute('id', id)
   	 }
   	 html = dom.serialize()

   	 // Verklein de HTML
   	 html = minify(html, {
   		 removeComments: true,
   		 preserveLineBreaks: true,
   		 collapseWhitespace: true
   	 })
   	 await fs.writeFile(file, html)
    })
)

Bijwerken van package.json

Werk je package.json bestand bij om het script uit te voeren na het bouwproces. Voeg && node process-html.mjs toe na astro build zoals weergegeven in het voorbeeld hieronder.

{
	"name": "astro-process-html",
	"type": "module",
	"version": "0.0.1",
	"scripts": {
		"dev": "astro dev",
		"start": "astro dev",
		"build": "astro build && node process-html.mjs",
		"preview": "astro preview",
		"astro": "astro"
	},
	"dependencies": {
		"astro": "~2.1.3",
		"@astrojs/vercel": "~3.2.1",
		"globby": "~13.1.3",
		"html-minifier": "~4.0.0", 
        "jsdom": "~21.0.0" 
    } 
}

Conclusie

Door deze stappen te volgen, heb je met succes een script gemaakt dat je door Astro gegenereerde HTML bestanden aanpast na het bouwproces. Deze verbetering voegt ID's toe aan heading tags en verkleint je HTML, waardoor de prestaties en toegankelijkheid van je website verbeteren. Aarzel niet om het script verder aan te passen aan je specifieke behoeften en bekijk de html-minifier referentiegids voor extra configuratieopties. Voel je vrij om contact op te nemen als je vragen hebt of meer hulp nodig hebt! Veel programmeerplezier! 😉