
DX / outils : Vite + Angular + Analog pour blogs statiques/ISR
Pipeline 2025 pour un blog Angular sur Vite/Analog avec ISR, builds rapides et mesures dev/prod.
Pipeline 2025 pour un blog Angular sur Vite/Analog avec ISR, builds rapides et mesures dev/prod.
Un blog Angular sur Vite/Analog se build vite et se déploie proprement en ISR. Voici une config pragmatique.
Dépendances clés
@analogjs/platformpour le SSR/ISR.@angular/platform-server+@angular/ssr.vite+@analogjs/vite-plugin-angular.
Scripts recommandés
{
"scripts": {
"dev": "analog dev --host",
"build": "analog build",
"preview": "analog preview",
"lint": "ng lint",
"test": "ng test --watch=false"
}
}
ISR en 2 lignes
// analog.config.ts
import { defineConfig } from '@analogjs/platform';
export default defineConfig({
prerender: { routes: ['/', '/articles', '/tags'] },
ssr: { static: { revalidate: 300 } },
});
prerender.routespour les pages stables.revalidate: 300pour régénérer toutes les 5 minutes.
Benchmarks rapides
analog build(M2, 16 Go) : 6-8s pour ~30 pages.analog dev --host: cold start ~1.2s, HMR <200ms sur templates.- Lighthouse (SSR + hydration partielle) : LCP 1.2-1.6s, TBT <60ms.
Pipeline CI minimal (GitHub Actions)
name: ci
on: [push]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: 20 }
- run: npm ci
- run: npm run lint
- run: npm test -- --watch=false
- run: npm run build
Ajoutez un job de déploiement (Netlify/Vercel) qui pousse le dossier dist/analog/public.
Tips DX
- Activer
@analogjs/contentpour le markdown + frontmatter natif. - Ajouter
vite --clearScreen=falsepour des logs lisibles en CI. - Sur VS Code, configurer
typescript.tsdkversnode_modules/typescript/libpour profiter des derniers types Angular.
