Lazy JavaScript per route
What a first visit fetches on top of the initial bundle, from the QA build. Before means after step 7. MB means a million bytes.
| Route | Before | After |
|---|---|---|
/dashboard and its pages | 5.65 MB | 5.10 MB |
| Marketing and comparison pages | 2.16 MB | 1.23 MB |
| Marketing pro pages | 2.19 MB | 2.07 MB |
| The whitelabel cover page | 3.18 MB | 3.17 MB |
The initial bundle is 14.5 KB smaller. No other entry moved by more than 10 KB. The build has 267 JavaScript files where step 7 had 272.
Why four commits in this order
Once dashboard stops importing SharedModule, nothing imports shared.module.ts, and the compiler leaves the file out. Every component it still declared then compiles with no template scope. My first try at the dashboard commit failed on two dialogs for this reason, and the other declarations would have broken at runtime without an error. So all of SharedModule's declarations become standalone first, while dashboard still imports it. Then dashboard can drop it, and the file can go.
Commit 26235a170b: make the SharedModule pieces the dashboard uses standalone
What changed
- 18 SharedModule declarations are standalone. Most are checkout pieces, such as order payment, the Stripe form, shipping options and the discount code modal. The rest are
VideoPlayerV3Component,ChatCommentsComponent,LinkifyPipeand the two schedule pipes. OrderConfirmationComponentis one of them. Dashboard routes to it directly, so it can't depend on SharedModule's compile scope.WatermarkControlsComponentis one too. It lives in the dashboard folder but SharedModule declared it. The image and video trim steps of a new post render it.VipOfferListComponentimports the 11 pieces it renders instead of SharedModule.- They moved from SharedModule's declarations to its imports, so SharedModule still exports them.
How I checked it
| Check | Result |
|---|---|
| Compiled template dependencies against step 7 | 645 of 650 components match. The other five lose only the phone directive. Their templates have no phone input. |
| QA and development builds | Both pass. QA has the same 42 warnings as base. Development has none. |
| Server rendering, 138 URLs | All match step 7. This ran before the watermark controls joined the commit. They only render on the logged-in new post page, which the dashboard commit's browser runs cover. |
| ESLint on the changed files | 2 errors, down from 20. The 18 gone are prefer-standalone. The two left are empty lifecycle methods that exist on base. |
Commit d1184365be: make the rest of SharedModule's declarations standalone
What changed
- The last 27 SharedModule declarations are standalone. Most are dialogs that
BsModalServiceopens by class, such as follow, unfollow, share, report, block and cancel confirm, post likes and the login dialogs. - The others are the search bar typeahead, the old video player, the schedule dialog, the taxonomy detail and
NoSpaceDirective. - SharedModule has no declarations left. It only imports and re-exports standalone pieces.
How I checked it
| Check | Result |
|---|---|
| Compiled template dependencies against the first commit | 645 of 650 components match. The other five lose only the phone directive. |
| QA and development builds | Both pass with the same warnings as before. The initial bundle is 48 bytes smaller. |
| Server rendering, 138 URLs | All match step 7. |
| ESLint on the changed files | No prefer-standalone errors left. Eight errors from older rules remain, such as use-lifecycle-interface. The conversion doesn't touch the code they flag. |
These dialogs open on user actions, so server rendering doesn't reach most of them. The browser runs in the next commit open several.
Commit 7d1763c28f: make the dashboard standalone
What changed
dashboard.module.tsis deleted.dashboard-routing.module.tsbecamedashboard.routes.ts, which exportsDASHBOARD_ROUTES. The routes, guards and data are the same.- The 36 components the module declared are standalone. That includes the two newsletter pages that live in the monetize folder.
- The module provided five services.
DashboardModuleServiceisprovidedIn: 'root'and holds state, but the module gave dashboard its own instance. To keep that, all five are nowproviderson the top-level dashboard route. That route gets its own injector, like the lazy module did. isPostCollaboratorPipeis on that route too. It injectsMyProfile, which injectsDashboardModuleService. Dashboard used to get it from SharedModule's providers. The search results page injects it through the searched post list.- The module's
forRoot()calls for the multiselect dropdown and circle progress modules are gone. The root injector already registers both with the same options. - The module's
CUSTOM_ELEMENTS_SCHEMAhid a[coverImage]binding on the video player in the video trim step. The player has no such input and video trim sets the cover throughsetCoverImage(), so I removed the binding. - 17 components lose the phone directive. Their templates have no phone input.
How I checked it
| Check | Result |
|---|---|
| Compiled template dependencies against the second commit | 628 of 650 match and 17 lose only the phone directive. The forum post detail resolves the same NgbCarousel class through another @ng-bootstrap entry point. Four components leave the build because only shared.module.ts referenced them. |
| QA and development builds | Both pass with the same warnings as before. |
| Server rendering, 138 URLs | All match step 7. |
| Logged-in browser run, white-label site | 30 dashboard URLs land on the same page with the same components. Four differed while feeds and search results were still loading, then matched with a 25 second wait. The one page error, on an order confirmation link with a made-up ID, happens on step 7 too. |
| New post page | All ten post type tabs render the same. On the text tab, typing a draft and then opening schedule, switching tabs, or opening the interests, topic tags and groups pickers matches too. |
| Dialogs on the creator feed | Share, likes, the post menu, profile share and contributions open with the same content. |
| ESLint on the changed files | No prefer-standalone errors left. 17 errors from older rules remain, such as no-output-on-prefix. |
Commit 7c0b9351ac: delete SharedModule and MarketingPageSharedModule
What changed
shared.module.tsis deleted. Nothing imported it after the dashboard commit.marketing-page-shared.module.tsis deleted. The marketing, comparison and pro pages and the cover page's add section page import the pieces they render. The marketing and comparison pages only need the full preview component.- A commented-out SharedModule import in
DynamicFormBuilderModuleand a comment inshared-root.providers.tsno longer point at the deleted module.
How I checked it
| Check | Result |
|---|---|
| Compiled template dependencies against the dashboard commit | All 646 components match. |
| QA and development builds | Both pass with the same warnings as before. |
| Server rendering, 145 URLs | All match step 7. The list adds 14 marketing and pro pages. |
| Every layout in the add section modal | All 47 open the section editor with the same components on both builds, and no page errors. The header and footer editors, the preview and add sub-page match too. |
| Every component on 6 entries resolves in the browser | Dashboard, marketing, comparison, pro, the cover page and edit preference. No problems and no page errors. |
| ESLint on the changed files | No errors. |
Nothing was bought, posted or saved. The checkout pages, order confirmation and the delete dialog weren't completed in a browser, so they're at the top of the checklist.
What's left
DynamicFormBuilderModulestill declares 18 components.BioLinkPipeis stillstandalone: false.- Four components are unused now:
ProfileDetailComponent, the two subscription modals and the typeahead search bar. Onlyshared.module.tsused them. The one template with the typeahead has it inside an HTML comment.
Verification checklist
Use a creator account on its white-label site, plus a fan account for checkout. Keep the console open. Checks that end in buy, post or save change real data, so use test accounts and test cards. Checks are saved in this browser.
0 of 0 checked