Lazy JavaScript per route
What a first visit fetches on top of the initial bundle, from the QA build. Before means after step 2. MB means a million bytes.
| Route | Before | After |
|---|---|---|
/monetize and all its pages except portfolio | 5.38 MB | 3.20 MB |
| The post price dialog, which the dashboard service imports on demand | 3.38 MB | 0.88 MB |
/monetize/portfolio, unchanged | 5.08 MB | 5.08 MB |
The 13 entries that still load SharedModule grew by at most 6.5 KB, edit-preference being the largest. The initial bundle grew by 1.3 KB, while the code inside it shrank by 385 bytes. The growth is chunk overhead again: esbuild made 5 more small shared chunks.
Of the 3.20 MB left, 900 KB is monetize's own components. The QR scanner library for ticket redemption is 416 KB and the Quill editor with its emoji plugin is about 400 KB. Every monetize page gets all three today, because the routes use component and not loadComponent. Moving the child routes to loadComponent would give each page only what it renders. I left that out of this commit to keep it a like-for-like swap.
Commit 96be9f8389: make monetize standalone, apart from portfolio
What changed
monetize.module.tsandmonetize-routing.module.tsare deleted.app-routing.module.tsloadsMONETIZE_ROUTESfrom the newmonetize.routes.ts. The routes, guards and data are the same as before, and/monetize/portfoliostill lazy-loadsPortfolioModule.- The 39 components the module declared are standalone. Each imports what the Angular compiler matched in its template and nothing else.
- The module called
NgCircleProgressModule.forRoot({}). PR 10832 already provides that at the root, so dropping it changes nothing. It also setCUSTOM_ELEMENTS_SCHEMA. No monetize template needs it, and the compiler now reports unknown elements in these components. - The newsletter list and view components live in the monetize folder but belong to
DashboardModule. They're left for the dashboard step. - Eleven SharedModule pieces became standalone and moved from its declarations to its imports: the currency conversion modal, post submit, badge groups selection, minimum tip, the event list item, the four share modals for event tickets, feed content, merchandise and portfolio, and the
hasArrayValueandpluralizepipes. SharedModule still exports them. TextEditorComponent, its AI generate modal andPostPriceComponentwere already standalone but imported SharedModule. After converting monetize, those three still pulled SharedModule into/monetize. They now import what they use. The text editor needed the four share modals, which is why those are in the list above.- 23 components lose ngx-intl-tel-input's
NativeElementInjectorDirective. None of their templates has a phone input.
How I checked it
| Check | Result |
|---|---|
| Compiled template dependencies against step 2 | 630 of 653 components match. The other 23 lose only the phone directive and gain nothing. |
| QA and development builds | Both pass. QA has the same 42 warnings as base. Development has none. |
SharedModule on the /monetize import graph | No file on it imports SharedModule. |
| Server rendering, 70 URLs | All match step 2 once the compare script masks bundle hashes, style scope IDs and the hydration state. Monetize itself only renders the app shell on the server, because it needs a login. |
| Logged-in browser run, white-label site | 24 monetize URLs, every child route including portfolio, the add and edit forms and redeem ticket. Same components and no page errors after a 20 second wait. /monetize/downloadable came back empty on both builds once. Three reruns matched. |
| Newsletter editor | On /monetize/newsletters/add the Quill toolbar shows and typed text lands in the editor, on both builds. |
| Group selection | On /monetize/event-calendar/add-event the groups accordion lists Everybody and two groups, and a group can be checked, on both builds. |
| ESLint on the changed files | 14 errors, down from 64. The 50 gone are prefer-standalone. The 14 left exist on base. |
A note on the first measurement. After converting the monetize components alone, /monetize still loaded SharedModule, only 16 KB lighter. The text editor, its AI modal and the post price dialog were importing it. The plan's count of 10 SharedModule pieces only looked at monetize's templates, not at the standalone components those templates use.
Verification checklist
Use a creator account on its white-label site, where monetize opens. Keep the console open. Checks are saved in this browser.