L'analyse du code

Avant même la mise en ligne

L'audit mesure le site tel qu'il est servi, mais beaucoup de ce qui l'alourdit se voit déjà dans le dépôt, une photo de quatre mégaoctets dans public/ ou une police en TTF par exemple. Le job .grammage-source lit donc le dépôt lui-même, sans navigateur ni aperçu, et signale ce qui pèsera sur les pages avant qu'elles partent en ligne, avec le fichier, la ligne et le correctif à appliquer.

grammage-source:
    extends: .grammage-source

grammage source .
grammage source . --fail-on warning

Le job ne bloque jamais le pipeline, parce qu'un constat sur le code dit ce qui risque de peser, pas ce qui pèse vraiment. --fail-on warning sert à l'équipe qui préfère bloquer quand même. L'analyse ne lit ni les dépendances, ni les sorties de construction, ni ce que le .gitignore écarte, ni les dossiers qui ne partent jamais en ligne, docs, scripts, tests et fixtures. Elle ne demande aucune licence, et l'API ne la fait pas, puisqu'elle n'a pas accès à votre code.

Ce que l'analyse signale

Chaque constat arrive dans le widget Code Quality de la demande de fusion, annoté sur la ligne du fichier concerné, donc la personne qui a ajouté l'image ou la dépendance le voit au moment où elle en parle avec son équipe, et pas trois mois plus tard.

Le code jamais exécuté, fichier par fichier

En production, le JavaScript inutilisé ne se voit que par paquet, _nuxt/B5pp_0lr.js par exemple, ce qui ne dit pas quel composant ou quelle dépendance corriger. Quand le job de CI a sous la main le build du projet avec ses source maps, Grammage rattache chaque octet jamais exécuté à son fichier d'origine, app/components/MapComponent.vue ou node_modules/gsap, et le rapport les classe du plus lourd au plus léger.

• Nuxt
• Vite
• Astro
• Next.js

Il faut pour ça deux choses. Le build produit des source maps sans les publier, ce que le mode hidden fait très bien, et le job de Grammage reçoit ce build en artefact, construit par le même pipeline que l'aperçu, pour que les fichiers correspondent vraiment à ce qui est servi.

export default defineNuxtConfig({
    sourcemap: { client: 'hidden' },
});

export default defineConfig({
    build: { sourcemap: 'hidden' },
});

export default defineConfig({
    vite: { build: { sourcemap: 'hidden' } },
});

module.exports = {
    productionBrowserSourceMaps: true,
};

grammage:
    extends: .grammage
    needs: [build, preview]

Sans source maps, le rapport garde simplement le détail par paquet.

De la mesure au fichier du dépôt

En CI, le job d'audit lit aussi le dépôt cloné, et relie chaque fichier fautif mesuré sur la page à son fichier dans le dépôt, une image public/images/hero.png servie sous /_nuxt/hero.Bx1aB2cD.png ou par /_next/image par exemple. Le constat s'annote alors sur le bon fichier, et le brief grammage-agent.md donne à un agent de code ou à un collègue la liste des fichiers à toucher, le correctif propre au framework, le gain attendu et la commande qui vérifie que c'est fait.