search

ProvidenceGeeks / website-frontend

UI frontend repository for the Providence Geeks website
https://www.pvdgeeks.org
7 stars 9 forks source link

Bundle analyzer #147

Closed thescientist13 closed 6 years ago

thescientist13 commented 6 years ago

Related Issue

resolves #160

Summary of Changes

Presenting some interesting stats for review using webpack-bundle-analyzer

Currently in Production (v0.2.2)

bundle-analyzer-0 2 2

After webpack v4 upgrade (#142 )

bundle-analyer-webpack-4

After lazy loading + optimization (#137 )

bundle-analyzer-lazy-load
thescientist13 commented 6 years ago

Observations

  1. In production, our vendor bundle isn't really a vendor bundle, since it only has jquery in it. So certainly a different outcome than we may have expected, but this seems to be expected when defining two entry points. It seems it would have been better (at the time) to just use a single entry point and have CommonsChunkPlugin create the common bundle organically, perhaps.
  2. There are more chunks now in the lazy loaded / optimized version which naturally increases the number of HTTP requests, but with gzip, proper long-term caching strategies, and the usage of HTTP/2, network performance becomes a minimal bottleneck at best, thus pushing the burden back to the browser (download and parse time are much more costly, even factoring in the cost of decompressing the payload)
  3. As a result, chunking is much more discrete with lazy loading / optimizations, which I think makes for a better distinction and segmentation across bundles, which means if one changes, the impact to the user is much smaller (smaller bundle to re-download and parse)