react-shrine icon indicating copy to clipboard operation
react-shrine copied to clipboard

Optimize bundle size

Open addyosmani opened this issue 7 years ago • 2 comments

After adding code-splitting, Brotli, preloading and preconnect, the app is hitting a TTI of ~3.7s on WebPageTest. I'd like to see if there's opportunity to do better.

Bundle size is roughly ~70KB over the wire (compressed). If we unpack this using source-map-explorer, it looks like this:

image

Biggest offenders

  • React 16 and React DOM. Moving over to Preact and Preact Compat locally save ~15KB but compatibility breaks in ways I need to dig into further.
  • JSS is way larger than the value it's bringing here.
  • Material UI is about as small as I think we can get it.
  • Between core-js, babel-runtime and promise it looks like we could break out some of those polyfill bundles to be conditionally loaded to older browsers.

addyosmani avatar Oct 22 '18 23:10 addyosmani

I can take on this one.

jonchenn avatar Jan 11 '19 16:01 jonchenn

Sgtm!

addyosmani avatar Jan 17 '19 05:01 addyosmani