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

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
Aan de slag
Zorg voordat je kunt beginnen dat je de volgende vereisten op je systeem hebt geïnstalleerd:
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! 😉