Lazy JavaScript per route
What a first visit fetches on top of the initial bundle, from the QA build. Before means after step 4. MB means a million bytes.
| Route | Before | After |
|---|---|---|
/bio/:userName | 3.82 MB | 1.20 MB |
Creator profiles, /:id and /wls/:id | 3.35 MB | 1.86 MB |
/monetize/portfolio and its pages | 5.10 MB | 2.07 MB |
/dashboard, still on SharedModule | 6.46 MB | 5.66 MB |
/edit-preference, still on SharedModule | 6.03 MB | 6.03 MB |
/dashboard got 0.80 MB lighter because it no longer bundles the portfolio editor. It imported all of PortfolioModule to render one component.
The entries still on SharedModule are dashboard, edit preference and the whitelabel cover page. Every other entry grew by at most 3.8 KB, and the initial bundle by 1.1 KB. That's chunk overhead again. The build has 271 JavaScript files where step 4 had 260.
Commit 00a1edbc5c: stop link in bio loading SharedModule
What changed
- The link in bio page, the monetize carousel, the welcome video preview and the feed content preview were standalone but imported all of SharedModule. They now import what the Angular compiler matched in their templates.
- Everything they use was already standalone, so no other file changes.
- The edit preference link in bio editor renders the same three previews. Edit preference still loads SharedModule through its own module, so its size doesn't move yet.
How I checked it
| Check | Result |
|---|---|
| Compiled template dependencies against step 4 | All 653 components match. |
| QA and development builds | Both pass. QA has the same 42 warnings as base. Development has none. |
| Server rendering, 87 URLs | All match step 4 once the compare script masks bundle hashes, style scope IDs and the hydration state. The list now includes link in bio, profile and portfolio URLs. |
| Logged-out browser run | Five link in bio URLs: two real creators, two unknown ones and an extra path segment. Same components and no page errors. The four changed components render on both real pages. |
| Logged-in browser run, white-label site | The link in bio editor, its preview and its add page match step 4. |
| ESLint on the changed files | No errors before or after. |
Commit ae40c39204: make profile standalone
What changed
profile.module.tsandprofile-routing.module.tsare deleted./:idand/wls/:idloadPROFILE_ROUTESfrom the newprofile.routes.ts, with the same single route toDynamicSeoProfileComponent.- The four components the module declared are standalone. They needed nothing else converted, because steps 2 and 3 already made
ProfileComponentand everything it renders standalone. SeoLandingComponentand its creator card are converted too, but nothing renders or routes to them. With the module gone, the compiler no longer reaches them. They can be deleted.- The module set
CUSTOM_ELEMENTS_SCHEMA. None of these templates needs it.
How I checked it
| Check | Result |
|---|---|
| Compiled template dependencies against the link in bio commit | 651 of 653 components match. The other two are the unused SEO landing components, which drop out of the compile. |
| QA and development builds | Both pass with the same warnings as before. |
| Server rendering, 92 URLs | All match. Four creator profile URLs render the full profile tree on the server, and an unknown creator renders not found, as before. Six URLs on the white-label builds match too, including the site root. |
| Hydration, main site | Four creator pages and an unknown one, logged out and logged in. Same components, no page errors, and no NG0 hydration errors in the console. |
| Hydration, white-label site | The root, /wls/perfectcrew, the creator path, /about and /store, logged out and logged in. Same results. Text length differed by one or two characters on two pages, which is a relative timestamp. |
| ESLint on the changed files | 1 error, down from 5. The 4 gone are prefer-standalone. The one left exists on base. |
Commit 9897f212fd: make portfolio standalone
What changed
portfolio.module.tsandportfolio-routing.module.tsare deleted./monetize/portfolioloadsPORTFOLIO_ROUTESfrom the newportfolio.routes.ts. The 26 routes, guards and data are the same.- The 18 components the module declared are standalone and needed nothing else converted.
PortfolioComponentloses the phone directive. Its template has no phone input. DashboardModuleimportsPortfolioBannerViewComponent, the one portfolio component its templates render, instead of the whole module. The dashboard's own routes under/dashboard/portfolio/:userIdare unchanged.- Importing the whole module also added its 26 routes to
/dashboard. A URL such as/dashboard/banner-view/:idopened the portfolio editor. Nothing links to those paths. They now behave like any unknown dashboard URL. - The module's
CUSTOM_ELEMENTS_SCHEMAhid four[infoIconSize]="18"bindings onapp-info-icon, which has no such input. They never did anything, so I removed them. The icons stay at their default 16 pixels. If they should be 18, that's[height]and[width], and a visible change. - The module's
NgCircleProgressModule.forRoot({})duplicated the root providers. SelectInterestsAccordionComponentwas only imported by the deleted module. Nothing uses it now.
How I checked it
| Check | Result |
|---|---|
| Compiled template dependencies against the profile commit | 649 of 651 components match. PortfolioComponent loses only the phone directive. The unused interests accordion drops out of the compile. |
| QA and development builds | Both pass with the same warnings as before, after removing the four bindings above. |
| Server rendering, 98 URLs | 96 match. The two that differ are leaked paths. /dashboard/banner-view/x now returns not found, and /dashboard/add-edit-portfolio now falls through to the sub-page view, the same as /dashboard/nonexistent-xyz did before. |
| Logged-in browser run, white-label site | 20 URLs: the portfolio hub, a real banner view and album, all nine add and edit forms, the dashboard's portfolio, banner and album views, link in bio and the site root. Same components on both builds. |
| Interactions | Playing a track opens the player and the audio plays. Clicking an album, add album, add track and add portfolio lands on the same pages. The groups selector lists the same three groups. Emptying a required field shows the same validation error. Save stays disabled until the form is complete, on both builds. |
| Every component on 6 entries resolves in the browser | Portfolio, dashboard, monetize, profile, link in bio and edit preference. No problems and no page errors. |
| ESLint on the changed files | 1 error, down from 19. The 18 gone are prefer-standalone. The one left exists on base. |
/monetize/portfolio/add-edit-portfolio without an ID throws "Cannot read properties of undefined (reading 'portfolio_shape')" in the console. It does the same on step 4.
Verification checklist
Use a creator account on its white-label site for the logged-in checks, and a private window for public pages. Keep the console open. Checks are saved in this browser.
0 of 0 checked