- which chunk does it live in?
- is it loaded only when it's needed?
- how large your libraries are?
Section chunks
- loaded during routing
- loads
stats.js
when navigating to/stats/*
sections-middleware.js
- unprefixed names:
stats
,reader
Async loaded chunks
async-load-*
prefix<AsyncLoad />
React components (with placeholder)asyncRequire
calls (with callback)
Always loaded
build
: changes oftenvendor
: changes rarely
npm run analyze-bundles
- watch how chunk sizes evolve at iscalypsofastyet.com
- submit your own branch at iscalypsofastyet.com/branch
- boot code to initialize Calypso, routing and section loading
- Redux store, reducers, middleware and handlers
<Layout>
component
- Guided Tours
- JITMs
- Welcome Message
- NPS (Net Promoter Score) Survey
- Keyboard Shortcuts Dialog
- Support User
- Translator Invitation
- Translator Launcher
- Notifications
- Drafts
- Write a Post (with Site Selector)
- Resume Editing
- Site Selector
- Site Notices
- Disconnect Jetpack
- async load rarely shown code
- defer initialization (translations, reading DOM)
- separate code that decides whether to display