Examples of optimizations

[iamakulov]

If you get stuck or just want to see our solution, there’s an branch called optimized with step-by-step optimizations. See each commit for a detailed description:

1. Bundle size improvements
   1.1. Enable the production mode: c4fe999
   1.2. Configure Babel to keep ES imports and exports as-is: c1bfd6a
   1.3. Optimize images: fb7610c
   1.4. Remove unused Moment.js locales: 404def2
   1.5. Replace whatwg-fetch with unfetch: a2fcb1d
   1.6. Remove unused polyfills: f3ef11c
2. Caching & loading time improvements
   2.1. Enable [chunkhash] in the bundle name: 4cd532b
   2.2. Extract the vendor and the runtime code: 3733078
   2.3. Inline the webpack runtime: 426796d
   2.4. Split the app by routes: 900df35
   2.5. Split the app by pages: 59793aa
   2.6. Make module ids stable: 0b5af5b

Don’t think of it as of “the ideal” solution – the app could be optimized in multiple ways, and it’s just one of the approaches that illustrates the optimization article.

Have ideas of how to make LitHub load even faster? Post them here in the comments!

[iamakulov]

We’ve updated the project for webpack 4! The comment above ↑ now includes optimization steps for it. If you keep using webpack 3 though, here’s the old optimization approach:

Webpack 3 optimization approach

Branch: optimized-v3.

1. Bundle size improvements
   1.1. Enable minification: eeb65a6
   1.2. Enable NODE_ENV replacement: c1e4182
   1.3. Configure Babel to keep ES imports and exports as-is: ad8a7c1
   1.4. Optimize images: f02b1b5
   1.5. Remove unused Moment.js locales: 6296dbd
   1.6. Replace whatwg-fetch with unfetch: fa00fb4
   1.7. Remove unused polyfills: 1f336c8
2. Caching & loading time improvements
   2.1. Enable [chunkhash] in the bundle name: 19321a3
   2.2. Extract the vendor and the runtime code: d45f534
   2.3. Inline the webpack runtime: d71db76
   2.4. Split the app by routes: a4ec643
   2.5. Split the app by pages: 70011b0
   2.6. Make module ids stable: e3dbc85