25. Reduce “Main Thread” execution time
Objective:
Minimize main bundle (wherever possible)
- Remove unneeded code & imports from “main”
- Remove as many third party libs from “main”
MarkPieszak
30. MarkPieszak
ORDER MODULEABOUT MODULE CART MODULE
DATA MODULE
TABLE MODULE
3rd Party Lib
UI-MODAL MODULE
AUTH MODULE AUTH MODULE
DATA MODULE
FAST
# 1 > LAZY-LOADING (ROUTES)
31. TIP:
Use ngx-quicklink (PreloadingStrategy)
Preload lazy modules when:
they are VISIBLE & the browser is idle.
Bonus points:
GuessJS
MarkPieszak
FAST
# 2 > PRELOADING STRATEGIES
46. Two types of SSR
Run-time: Dynamic
Angular Server-Side Rendering (SSR) # 1 ( continued )
INTERACTIVE
/products
Request
Response
Serialize App
Hit API
47. Two types of SSR
Build-time: Pre-rendering
Angular Server-Side Rendering (SSR) # 1 ( continued )
INTERACTIVE
/products
Request
Response
Products.html
48. TIP:
Opt for Pre-rendering routes (over Dynamic SSR)
wherever possible for faster responses.
Cache Pre-Rendered HTML
(File Storage / MemCache / Redis) where possible
Angular Server-Side Rendering (SSR) # 1 ( continued )
INTERACTIVE
49. Angular Server-Side Rendering (SSR) # 1 ( continued )
INTERACTIVE
TIPS & TRICKS:
You can setup all 3 types of rendering
Pre-rendering
app.get(SomeRoutes) => res.send( prerenderedHtml )
Dynamic SSR
app.get(OtherRoutes) => await renderModuleFactory()
Client-Side Rendering (CSR)
app.get(*). => res.send( originalIndexHtml )
50. # 1 ( continued )
Angular Server-Side Rendering (SSR)
MUST HAVE:
Transfer (re-use) Http responses between SSR => CSR
TransferHttpCacheModule from
@NgUniversal/Common
TIP:
Keep your API calls “lean” to not send too much
payload data down with the Html
INTERACTIVE
52. MarkPieszak
TIP:
Setup a Service Worker
Cache assets (JS/CSS/HTML/images) to
speed up subsequent page loads
RESPONSIVE
# 6 > PWA (PROGRESSIVE WEB APP)
56. Keep that MAIN bundle small
Move whatever functionality you can out of AppModule /
main.bundle
Try to keep NgModules lean / compact
Be intentional with imports
MarkPieszak
>>> IN CONCLUSION
57. Lazy-Load sections of your app - when visible
Images
Modules
Components
If you’re doing SSR
Remember to maintain some functionality during the
first initial paint
MarkPieszak
>>> IN CONCLUSION