Lazy JavaScript per route
This is what a first visit fetches on top of the initial bundle, from the QA build. MB here means a million bytes, the same unit the plan uses.
| Route | Before | After |
|---|---|---|
/about | 3.32 MB | 14 KB |
/pricing | 3.32 MB | 8 KB |
/privacy-policy | 3.32 MB | 10 KB |
/terms-of-service, /terms-conditions | 3.33 MB | 26 KB |
/contact-us | 3.32 MB | 15 KB |
/request-demo, /schedule-a-demo | 3.32 MB | 806 KB |
/help-faq | 3.33 MB | 34 KB |
/advertise | 3.34 MB | 54 KB |
/global | 3.31 MB | 6 KB |
/order-status | 3.32 MB | 16 KB |
/explore-creators | 3.35 MB | 98 KB |
/content | 3.42 MB | 373 KB |
/not-found and unknown URLs | 3.40 MB | 92 KB |
/calendar-connect | 3.31 MB | 11 KB |
/shopify-connect | 3.31 MB | 4 KB |
/unsubscribe-instruction | 3.31 MB | 1 KB |
/unsubscribe/newsletter | 3.31 MB | 3 KB |
/imported/opt-out | 3.31 MB | 6 KB |
The request demo pages stay at 806 KB because their form is DynamicFormBuilderModule, which is still an NgModule. The 21 routes that still load SharedModule grew by at most 8 KB each. The pieces that became standalone now sit in their own small chunks instead of inside SharedModule's. The initial bundle didn't change.
Commit 81797c0569: stop the 18 small pages loading SharedModule
What changed
- The 24 files on those routes that imported SharedModule now import what their compiled templates use and nothing else. The list comes from what the Angular compiler matched in each template on base, not from reading the HTML by eye.
- Nine SharedModule pieces those pages need became standalone:
RightSidebarComponent,SkyscraperPreviewModalComponent,VideoPlayerV2Component,FilterPipe,BioFormatPipe,ContentLengthHandlerPipe,VideoOption,SharedPhoneMaskDirectiveandIntersectionObserverDirective. They moved from SharedModule's declarations to its imports. SharedModule still exports them, so the dashboard, profile and every other module that uses them didn't change. /request-demoimportsDynamicFormBuilderModuledirectly. That module doesn't import SharedModule.- No providers were lost. PR 10832 already moved SharedModule's providers, and those of the libraries it imports, to the root injector.
One correction to the wallet doc
The wallet PR dropped ngx-intl-tel-input's NativeElementInjectorDirective from four components and said nothing reads what it sets. That's wrong. The library's phone validator reads control.nativeElement, and without the directive <ngx-intl-tel-input [phoneValidation]="true"> accepts any number. None of those four wallet templates has a phone input, so wallet didn't break. From here on I keep the directive wherever a template has <ngx-intl-tel-input>. In this commit that's /contact-us. The FAQ, collaborators and setup profile components lose it, and none of them has a phone input.
How I checked it
| Check | Result |
|---|---|
| Compiled template dependencies against base | 653 of 656 components match. The other 3 lose only NativeElementInjectorDirective, as described above. |
| QA and development builds | Both pass. QA has the same 42 warnings as base. Development has none. |
| Lazy JavaScript per route | The table above. All 18 routes stopped loading SharedModule's chunk. |
| Component definitions in a browser | I loaded each of the 18 chunks and walked every reachable component. All dependencies resolve, with no page errors. |
| Server rendering, 45 URLs | All match base once the compare script masks bundle hashes, style scope IDs and the hydration state. That includes every route above, the marketing pages, and the logged-in routes, where the server renders only the shell. |
| Logged-in browser run, main site | 14 routes on base and on this commit. Same components rendered, same text length, no new console errors. |
| Logged-in browser run, white-label site | /explore-creators, /content/setup-profile and five public pages. Same components, no new errors. The collaborators tab opens on both. The only text difference is the random "creators you might like" list in the right sidebar. |
Phone validation on /contact-us | Typing 12345 marks the field invalid and shows the error message, on base and on this commit. |
| ESLint on the changed files | 4 errors, down from 13. The 9 gone are prefer-standalone. The 4 left exist on base. |
A note on the white-label run. The test account is a creator, and on the main site every creator screen redirects it to its white-label setup. Creator screens only open on the account's white-label site. The QA environment ships with whiteLabelConfig: null, so I made a second QA build in a throwaway worktree with that site's config filled in, the same way scripts/generate-whitelabel.js does. Nothing in the repo changed for this.
Verification checklist
Keep the console open. The creator checks need a creator account on its white-label site. Checks are saved in this browser.