Skip to content

Instantly share code, notes, and snippets.

@jsnajdr
Last active February 15, 2018 16:55
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save jsnajdr/899d7bf3cea4d5be026e6710e81ca59d to your computer and use it in GitHub Desktop.
Making Calypso small and fast to load

Be aware of where your code goes

  • which chunk does it live in?
  • is it loaded only when it's needed?
  • how large your libraries are?

Understand how code splitting works

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 often
  • vendor: changes rarely

Tools

Webpack Analyze Bundles

npm run analyze-bundles

Is Calypso Fast Yet?

  • watch how chunk sizes evolve at iscalypsofastyet.com
  • submit your own branch at iscalypsofastyet.com/branch

What's in the build chunk?

  • boot code to initialize Calypso, routing and section loading
  • Redux store, reducers, middleware and handlers
  • <Layout> component

The build chunk paradox: code rarely used, always loaded

Global modal UI

  • Guided Tours
  • JITMs
  • Welcome Message
  • NPS (Net Promoter Score) Survey
  • Keyboard Shortcuts Dialog
  • Support User
  • Translator Invitation
  • Translator Launcher

Masterbar

  • Notifications
  • Drafts
  • Write a Post (with Site Selector)
  • Resume Editing

Sidebar

  • Site Selector
  • Site Notices
  • Disconnect Jetpack

What to do?

  • async load rarely shown code
  • defer initialization (translations, reading DOM)
  • separate code that decides whether to display
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment