Skip to content

Load amCharts and the heavy admin plugins only where they're used - #564

Merged
rbruhn merged 1 commit into
developmentfrom
lazy-load-assets
Oct 13, 2026
Merged

rbruhn merged 1 commit into
developmentfrom
lazy-load-assets

Conversation

@rbruhn

@rbruhn rbruhn commented Oct 13, 2026

Copy link
Copy Markdown
Contributor

Loads amCharts and the heavy admin plugins only on the pages that use them, now that the build is Vite (#562).

amCharts

Both layouts included common/amchart.blade.php on every page: amCharts core, charts, the animated theme, maps and the world and US map data from amcharts.com, about 450 kB compressed, only so the WeDigBio rate modal in the menu could draw its chart.

  • common/amchart.blade.php is now just the CDN tags, with the map libraries behind ['maps' => true].
  • Pages that draw a chart include it before their chart bundle: the project page (with maps when it shows the transcription and map charts), front events and event pages, admin events and project statistics, and the bingo card (maps).
  • The layouts load only the rate modal's script (4 kB). It fetches amCharts core, charts and the theme the first time the modal opens (amcharts-loader.js), and reuses them after that. If the modal is closed before they arrive, it doesn't start its 5-minute refresh.

Admin plugins

The admin bundle carried jqGrid, jQuery UI, Summernote and the datetimepicker on every admin page.

Chunk Size (compressed) Loaded when
admin-app (was everything) 94 kB (29 kB), was 786 kB (225 kB) every admin page
admin-grid: jQuery UI, ui.multiselect, jqGrid, jqgrid.js 632 kB (186 kB) the page has #jqGridTable (subjects, expedition create, edit, show and clone)
Summernote 172 kB (40 kB) the page has a .textarea editor
datetimepicker 61 kB (20 kB) the page has .date-time-picker fields

jQuery UI is only used by the grid's column chooser, so it moves into the grid chunk. Bootstrap-select, bootbox, notify and ClipboardJS stay in the main bundle, since they're used across the admin.

Tested locally (biospex.test)

  • yarn build succeeds; php artisan test --compact: 632 passed.
  • Front: home, projects and expeditions load no amCharts. The project page loads core, charts, theme, maps and map data, and its 3 charts and map render. Events loads core, charts and theme. On the past WeDigBio events page, Rates fetches amCharts and draws the rate chart; a second event's rates reuse them.
  • Admin: the projects list loads none of the lazy chunks. Subjects loads the grid chunk (25 of 139,770 rows; the column chooser opens with data-selected-value). Expedition create loads the grid chunk (25 rows, Livewire managers). Event create loads the datetimepicker (both fields). Project edit loads Summernote (editor and toolbar). Statistics and admin events load amCharts and render.
  • No console errors.

To verify on development

See #548.

amCharts is no longer loaded on every page: pages with charts include it before their chart bundle, and the WeDigBio rate modal fetches it when first opened. In the admin, jqGrid and jQuery UI load only on pages with the subjects grid, Summernote only with an editor and the datetimepicker only with date fields, which takes the admin bundle from 786 kB to 94 kB.
@rbruhn
rbruhn merged commit 9099cd7 into development Oct 13, 2026
2 checks passed
@rbruhn
rbruhn deleted the lazy-load-assets branch October 13, 2026 17:23
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