jlengstorf / advanced-react-perf

Hi. I’m Jason. I build lots of demos on this account and the @learnwithjason organization. Most of them are built live on Learn With Jason, a live-streamed pair programming show where super smart people join to teach us something new in 90 minutes.

I help dev tooling companies tell better stories and build stronger communities through creative media and strategy consulting. For more information about me (and a whole lot of shenanigans), check out jason.energy.

I have been booped on the nose 41 times.

You can boop my nose by running npx boop-jasons-nose. (I built this with @gr2m on an episode of Learn With Jason.)

advanced-react-perf's Issues

Create a branch per section

We need to step through the optimizations on master and apply them to unoptimized-start in sequence.

Notes on the sequence:

• Start with a mess

// Part 1: low-hanging fruit

• Run the bundle analyzer
• Turn on production builds for webpack
• Add terser
• Extract CSS
• Minify CSS
• Set browser targets for Babel (@babel/preset-env)
• Enable gzip compression

// Part 2: set up code splitting

• lazy load large deps (the Prettier + plugins setup)
• lazy load routes and large components (React.lazy + Suspense)
• add chunk names for easier debugging

// Part 3: refactor giant deps

• move Prettier to admin dashboard vs. loading on the client side
• refactor Moment.js to use date-fns

to mention: lodash vs. lodash-es

// Part 4: optimize font loading

• switch from @import to <link /> for Google fonts
• add font-display: swap for local fonts (Fira Code)

// Part 5: add a Service Worker

• set up workbox
• load the SW in index.html

at this point, all the bundles will be preloaded, and that’s ~1.5MB

• ignore vendor bundles
• set up runtime caching for vendor bundles
• add runtime caching for Google Fonts

// Part 6: show things as loaded instead of blocking on the slowest thing

• refactor the dashboard to load metrics inside the chart
• use Suspense to load the chart

// Part 7: optimize images

• run JPGs and PNGs through tinypng.com (you can get an API key and do this automatically)
• optimize SVG with SVGO (we do this automatically with https://github.com/boopathi/react-svg-loader)

Add Sara's bio and links to readme