Lazy JavaScript per route
What a first visit fetches on top of the initial bundle, from the QA build. Sizes are minified bytes before compression. Before means after PR 10840. MB means a million bytes.
| Route | Before | After |
|---|---|---|
/edit-preference | 4.32 MB | 4.31 MB |
| The whitelabel cover page | 3.17 MB | 3.15 MB |
/monetize | 3.21 MB | 3.20 MB |
/dashboard | 5.10 MB | 5.09 MB |
/messages, /insights, /wallet, /auth, /resources, profiles, post detail and the pro page | 13 KB less each |
The post price dialog is its own lazy entry. On its own it drops from 0.88 MB to 0.12 MB, but it only opens from new post or a live stream, after the dashboard's code has loaded. Counted on top of that, it fetches 64 KB where it fetched 60 KB, so it's about 4 KB worse in practice. Apart from that dialog, no entry grew by more than 198 bytes. The initial bundle has the same source files and 322 fewer bytes of code. It's 1.3 KB bigger overall because it's split into 108 chunks instead of 100, and each chunk adds a little import and export code. Routes now import different subsets of the form builder, so the bundler cuts shared code into smaller pieces.
Commit 5bdbb26936: make the module's components standalone
What changed
- The 18 components the module declared are standalone. They include the form builder itself, the date and time pickers, the file uploads, the color picker, the location input and the map.
- They moved from the module's declarations to its imports, so the module still exports what it did.
DynamicFormBuilderComponentimports every field component its template renders. That includes five the module declared but never exported: the time picker, the multi-select, both file upload inputs and the profile image upload.
My conversion script left those five out at first. It builds each import list from the compiled template dependencies, and the diff script I used to compare them hid the gap. Its filter ignored more than the one directive it was meant to skip. I added the five by hand and replaced the diff script with one that ignores only that directive. I then reran it on PR 10840, and it found nothing new there.
How I checked it
| Check | Result |
|---|---|
| Compiled template dependencies against PR 10840 | All 646 components match. |
| QA and development builds | Both pass. QA has the same 42 warnings as before. |
| Initial bundle | Unchanged, byte for byte. |
| Server rendering, 145 URLs | All match PR 10840. |
| ESLint on the changed files | 3 use-lifecycle-interface errors, all in older code. |
Commit 643b28fbfa: delete DynamicFormBuilderModule
What changed
- The 92 components that imported the module import the pieces they use. Most need one or two, such as
DynamicFormBuilderComponent,ButtonComponentorFormInputComponent. dynamic-form-builder.module.tsis deleted, and so is its routing module, which had an empty route list.- The module provided the form builder service, the image compressor and the phone and SSN mask directives. The root injector already provides all four.
- The color picker service still comes from
ColorPickerModule, which the color picker field imports. Standalone imports reach through child components, so every route or dialog that renders a picker still gets its own copy of the service, as before.
How I checked it
| Check | Result |
|---|---|
| Compiled template dependencies against the first commit | All 646 components match. Nothing references the deleted files. |
| QA and development builds | Both pass with the same 42 warnings. |
| Server rendering, 145 URLs | All match PR 10840. |
| Logged-in browser run, white-label site | 30 form pages across monetize, edit preference, insights, wallet, messages, resources, contact and new post. All land on the same page with the same components and no page errors. Five differed on the first pass while still loading, then matched with a longer wait. |
| The five restored field types | The time picker renders on add event and the second version of the file upload input renders on add downloadable, same as before. The multi-select and profile image upload only show inside dialogs, so they're in the checklist. |
| Color pickers | On the whitelabel appearance page, opening a second picker closes the first, same as before. The social links dialog prefills the same handles. |
| Every layout in the add section modal | All match, with no page errors. The header and footer editors, the preview and add sub-page match too. |
| New post page | All ten post type tabs and the five text tab actions match. The post price dialog opens from the article and video tabs with the same content. |
| ESLint on the changed files | 39 errors from older rules, such as use-lifecycle-interface and no-output-on-prefix. The change only touches imports. |
Nothing was saved or submitted. The forms were opened and compared, not filled in, so the checklist starts with filling in the forms that use the restored field types.
What's left
BioLinkPipeis stillstandalone: false, and nothing declares it.- Four components only the deleted
SharedModuleused are still in the tree.
Verification checklist
Use a creator account on its white-label site. Keep the console open. Checks that end in save or send change real data, so use a test account. Checks are saved in this browser.