Lazy JavaScript per route
What a first visit fetches on top of the initial bundle, from the QA build. Before means after step 3. MB means a million bytes.
| Route | Before | After |
|---|---|---|
| Login, signup, OTP and the other auth pages | 3.52 MB | 1.00 MB |
/forum | 3.46 MB | 0.81 MB |
/resources | 3.41 MB | 0.90 MB |
/messages | 5.44 MB | 2.71 MB |
/insights | 4.80 MB | 2.48 MB |
| Post detail | 3.75 MB | 1.85 MB |
| The music player modal, loaded on demand | 3.40 MB | 0.20 MB |
/edit-preference, still on SharedModule | 7.38 MB | 6.03 MB |
| Link in bio, still on SharedModule | 5.23 MB | 3.82 MB |
Edit preference and link in bio still load SharedModule, but they got smaller. They render the creator profile form and the portfolio music views, which no longer come with SharedModule attached.
The six entries that still load SharedModule are dashboard, portfolio, edit preference, link in bio, profile and the white-label cover page. Apart from the two above, they each grew by 15.6 to 17.8 KB. That growth is chunk overhead. Dashboard now pulls 92 chunks where it pulled 52, and the code in them shrank by about 1.5 KB. The initial bundle grew by 1.2 KB for the same reason. Each small shared chunk adds its own wrapper and import lines, and esbuild made many more of them now that fewer components sit in one module.
Commit b0114afffd: stop auth, forum, resources, messages, insights and post pages loading SharedModule
What changed
- 58 components now import what the Angular compiler matched in their templates and nothing else. They cover auth, forum, resources, messages, insights and post detail, plus the filter modal, the music and video player modals, the interests accordion and the creator profile info form in edit preference.
- Four SharedModule pieces became standalone and moved from its declarations to its imports: the payment intent checkout, the portfolio unlock modal, topic tags selection, and the
removeURLSandsafeUrlpipes. SharedModule still exports them. - The four music components in
PortfolioModulebecame standalone and moved to its imports. Its exports are the same.PortfolioItemPreviewComponentimports the music album and single track views it renders, where it used to import the wholePortfolioModuleand, through it, SharedModule. - 22 components lose ngx-intl-tel-input's
NativeElementInjectorDirective. None of their templates has a phone input.
The plan listed this step as import swaps with no conversions. It needed nine: the four SharedModule pieces, the four music components, and the preview component's switch away from PortfolioModule. Without them these routes still pulled SharedModule in.
How I checked it
| Check | Result |
|---|---|
| Compiled template dependencies against step 3 | 631 of 653 components match. The other 22 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. |
| Server rendering, 78 URLs | All match step 3 once the compare script masks bundle hashes, style scope IDs and the hydration state. |
| Logged-in browser run, white-label site | 19 URLs: messages, insights, forum, resources, three real posts, the white-label editor and the profile. Same components and no new page errors. Three reruns matched. |
| Logged-out browser run | The auth pages and a post page, 9 URLs. All match. |
| Real login | Email, password and OTP on the new build log in. |
| Messages composer | The composer and its dropdown behave the same on both builds. |
| Every component on 10 entries resolves in the browser | Loaded auth, forum, resources, messages, insights, post detail, the music player modal, portfolio, dashboard and edit preference and checked each component's definition. No problems and no page errors. |
| ESLint on the changed files | 25 errors, down from 34. The 9 gone are prefer-standalone. The one prefer-standalone left is BioLinkPipe, which shares a file with the pipes above and isn't touched here. |
/messages sometimes shows "Cannot read properties of undefined (reading 'length')" in the console. It shows on step 3 and on base too, about as often, when the QA API is slow. This commit didn't cause it.
Verification checklist
Use a creator account on its white-label site for the logged-in checks, and a private window for the logged-out ones. Keep the console open. Checks are saved in this browser.