Analysere Remix javascript bundle

  • Remix

EDIT: Dette er nå innebygd i Remix siden 1.19.0 🎉

Vi ønsker at minst mulig javascript blir overført til nettleseren, spesielt javascript som er helt unødvendig å bli overført. Kode som bare kjører på serveren er et godt eksempel på dette.

For å finne ut hvor unødvendig javascript kommer fra kan vi analysere resultatet fra remix bygget, som internt bruker esbuild. Esbuild lager en såkallt metafile som inneholder informasjon om bundlen. Enn så lenge er ikke innebygd i Remix å få den ut, men vi kan patche dette relativt enkelt ved å redigere riktig fil inne i node_modules/

// js compilation (implicitly writes artifacts/js)
let js = await tasks.js;
if (!js.ok) throw error ?? js.error;
let {
  metafile,
  hmr
} = js.value;

console.log("outputting meta.json");
var fs = require('fs');
fs.writeFileSync('meta.json', JSON.stringify(metafile));

// artifacts/manifest
let manifest$1 = await manifest.create({
  config: ctx.config,
  metafile,
  hmr,
  fileWatchCache: ctx.fileWatchCache
});

Deretter kan vi laste opp meta.json til esbuild sin offisielle bundle analyzer

Her ser vi det er react som tar mest plass

Det finnes en åpen PR i remix for å legge til metafil generering

Referanser