Skip to content

Laad de code-viewer alleen waar nodig en geef bestanden leesbare namen - #87

Open
robbertbos wants to merge 4 commits into
nldd-0.23from
laadtijd
Open

robbertbos wants to merge 4 commits into
nldd-0.23from
laadtijd

Conversation

@robbertbos

@robbertbos robbertbos commented Oct 9, 2026 •

Copy link
Copy Markdown
Member

Elke pagina laadde CodeMirror mee, en de pagina wachtte met tonen ook op elementen die niet van de site zelf zijn.

Bouwt voort op #114 (NLDD 0.23.0).

  • Wachten op de eigen componenten. Het designsysteem verbergt de pagina zolang er een element ongedefinieerd is, ook een dat niet van de site zelf is. In 0.23.0 is dat ongewijzigd. De pagina wacht nu alleen op nldd-shell. Tot de code-viewer geladen is, toont een codeblok zijn platte tekst in de vorm van de viewer, zonder kleuring en kopieerknop. De hoogte is gelijk, dus de pagina verspringt niet.
  • Code-viewer alleen waar nodig. De code-viewer brengt CodeMirror mee, terwijl 3 van de 22 pagina's een codeblok hebben. nldd.ts laadt hem nu alleen als de pagina een nldd-code-viewer bevat. check-site herkent die dynamische import.
  • Leesbare bestandsnamen. Layout.astro_astro_type_script_index_0_lang.js heet nu layout.js, en chunks heten naar hun pakket, zoals codemirror-lang-yaml.js in plaats van dist.js.

Gemeten met een lege cache, gzip zoals in productie en trage 4G (150 ms, 1,6 Mbit/s), mediaan van 3 runs. "Zichtbaar" is het moment waarop de pagina in beeld komt, "klaar" het moment waarop alle componenten gedefinieerd zijn.

Pagina Alleen #114 Deze PR Autoloader
Home 267 KB, zichtbaar 0,7 s, klaar 2,4 s 175 KB, 0,7 s, 1,8 s 222 KB, 0,7 s, 3,3 s
Code review (zijbalk) 268 KB, 0,7 s, 3,0 s 176 KB, 0,7 s, 2,4 s 216 KB, 0,7 s, 3,7 s
Dev machine (code) 269 KB, 0,7 s, 3,0 s 270 KB, 0,7 s, 3,0 s 318 KB, 0,7 s, 4,2 s

De @nldd/design-system/autoloader (sinds 0.21.0) zou de importlijst en de dynamische import overbodig maken. Hij laadt per tag een eigen module, ruim 80 requests per pagina, comprimeert slechter en was in deze meting steeds trager. Daarom blijft de importlijst.

De terugvaltijd van 200 ms uit het designsysteem blijft. Bij een eerste bezoek via trage 4G staat de pagina daardoor 1 tot 2,3 seconden onopgemaakt in beeld, met en zonder deze PR.

Bij welk issue hoort deze pull request?

Geen.

Check de volgende checklist voordat je om een review vraagt

  • Ik heb de contributing guidelines van deze repository gelezen en gevolgd.
  • Ik heb mijn aanpassingen gecheckt op spelfouten.
  • Als ik gebruik heb gemaakt van links, dan heb ik gecheckt of deze werken.

@robbertbos
robbertbos requested a review from a team as a code owner October 9, 2026 22:45
@github-actions
github-actions Bot temporarily deployed to preview October 9, 2026 22:46 Destroyed
@github-actions

github-actions Bot commented Oct 9, 2026 •

Copy link
Copy Markdown
Contributor

Preview: https://toon.rijks.app/digigilde/handboek/_preview/pr-87/

Open to anyone.

Commit 33895a4, Toon version 7e72a25f-c6f9-439e-966d-e0f0f249ce3d.

@github-actions
github-actions Bot temporarily deployed to preview October 10, 2026 05:35 Destroyed
@github-actions
github-actions Bot temporarily deployed to preview October 10, 2026 06:03 Destroyed
@github-actions
github-actions Bot temporarily deployed to preview October 10, 2026 06:08 Destroyed
@github-actions
github-actions Bot temporarily deployed to preview October 10, 2026 06:14 Destroyed
@robbertbos robbertbos changed the title Toon de pagina pas als hij klaar is, en laad CodeMirror alleen waar nodig Laad de code-viewer alleen waar nodig en geef bestanden leesbare namen Oct 10, 2026
@robbertbos
robbertbos changed the base branch from main to nldd-0.23 November 14, 2026 15:10
@github-actions
github-actions Bot temporarily deployed to preview November 14, 2026 15:10 Destroyed
Het designsysteem verbergt de pagina zolang er een element ongedefinieerd
is, ook een dat niet van de site zelf is. De pagina wacht nu alleen op
de eigen componenten.
De code-viewer brengt CodeMirror mee, ongeveer de helft van alle
JavaScript, terwijl 3 van de 21 pagina's een codeblok hebben. Zonder
codeblok laadt een pagina nu 657 KB in plaats van 1,33 MB. check-site
herkent ook een dynamische import van een component.
Astro noemde het script uit Layout.astro naar zijn virtuele module-id
(Layout.astro_astro_type_script_index_0_lang.js) en veel chunks uit een
pakket dist.js. Nu heten ze naar hun component of pakket, zoals
layout.js, code-viewer.js en codemirror-lang-yaml.js. De hash blijft.
@github-actions
github-actions Bot temporarily deployed to preview November 14, 2026 15:17 Destroyed
Tot de code-viewer geladen is, toont een codeblok zijn platte tekst in
de vorm van de viewer, zonder kleuring en kopieerknop. De pagina
verspringt niet als hij daarna laadt.

This branch was successfully deployed

1 active deployment
preview — 33895a4a Deployed Nov 14, 2026 by github-actions[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant