Split the js bundle into chunks to optimize the users download sizes

[klinker24]

Wanted your opinion on this @Serubin. My knowledge on webpack is limited, to be honest.

Whenever we do a production build, it throws all kinds of warnings that our bundle size is huge. I have dug into this in the past and reduced some of the dependencies (especially firebase), but it is still very large.

Webpack has a plugin to split chunks though. While this will not help the download size or page render time for the first time that the user opens the app, but it should improve the caching and download rates for these js bundles as we deploy changes.

This takes the build output from something like this:

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (2.45 MiB)
      css/chunk-vendors.75f139f3.css
      js/chunk-vendors.2bf2cb08.js
      css/app.1b96e225.css
      js/app.d3a73251.js

~~~

  File                                      Size             Gzipped

  dist/js/chunk-vendors.2bf2cb08.js         1981.39 KiB      440.81 KiB
  dist/decrypt.worker.js                    422.91 KiB       143.95 KiB
  dist/js/app.d3a73251.js                   335.23 KiB       78.87 KiB
  dist/css/app.1b96e225.css                 165.14 KiB       27.14 KiB
  dist/scss/material.teal-orange.min.css    138.02 KiB       20.32 KiB
  dist/scss/material.blue-pink.min.css      137.94 KiB       20.25 KiB
  dist/css/chunk-vendors.75f139f3.css       29.75 KiB        5.61 KiB
  dist/scss/auto-complete.css               0.64 KiB         0.36 KiB

To something like this:

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (2.46 MiB)
      js/chunk-vendors~0f485567.54c0f9a9.js
      js/chunk-vendors~a6cd21c3.3998b509.js
      js/chunk-vendors~38e42790.43530179.js
      js/chunk-vendors~a9d51527.dfe7838a.js
      js/chunk-vendors~e811fd70.5c5aa3de.js
      js/chunk-vendors~62ab6885.cee5a377.js
      js/chunk-vendors~38d28a58.0a06a86c.js
      js/chunk-vendors~70205952.088c90b2.js
      css/chunk-vendors~b5906859.bb3f78fa.css
      js/chunk-vendors~b5906859.899ca2fc.js
      css/chunk-vendors~db300d2f.79c177b7.css
      js/chunk-vendors~db300d2f.b53c3160.js
      js/chunk-vendors~53e5a206.e5af2466.js
      js/chunk-vendors~73636eba.cbf95c42.js
      js/chunk-vendors~7d359b94.919ab503.js
      js/chunk-vendors~9c5b28f6.dfed568a.js
      css/chunk-vendors~ec8c427e.7f89301a.css
      js/chunk-vendors~ec8c427e.57276545.js
      js/chunk-vendors~daa565d3.0da7ee84.js
      css/app~748942c6.f39269dc.css
      js/app~748942c6.3a3dd2ce.js
      css/app~bd29b02a.9769b582.css
      js/app~bd29b02a.f902ffef.js
      css/app~e73b60ec.339ebe67.css
      js/app~e73b60ec.1f08e19d.js
      css/app~8f033120.b1b606df.css
      js/app~8f033120.7f8d0070.js
      js/app~e2550e02.a015eb32.js
      css/app~ea265827.8239acf1.css
      js/app~ea265827.80fa2349.js
      js/app~c714bc7b.b6f3c8c0.js

~~~

  File                                      Size             Gzipped

  dist/js/chunk-vendors~53e5a206.e5af246    557.82 KiB       71.60 KiB
  6.js
  dist/js/chunk-vendors~73636eba.cbf95c4    548.30 KiB       83.78 KiB
  2.js
  dist/decrypt.worker.js                    422.91 KiB       143.95 KiB
  dist/js/chunk-vendors~b5906859.899ca2f    145.38 KiB       53.57 KiB
  c.js
  dist/js/chunk-vendors~ec8c427e.5727654    114.13 KiB       34.39 KiB
  5.js
  dist/js/chunk-vendors~daa565d3.0da7ee8    93.30 KiB        33.82 KiB
  4.js
  dist/js/chunk-vendors~9c5b28f6.dfed568    87.57 KiB        26.61 KiB
  a.js
  dist/js/chunk-vendors~a6cd21c3.3998b50    83.36 KiB        22.50 KiB
  9.js
  dist/js/chunk-vendors~db300d2f.b53c316    80.90 KiB        25.21 KiB
  0.js
  dist/js/app~ea265827.80fa2349.js          77.48 KiB        14.58 KiB
  dist/js/chunk-vendors~70205952.088c90b    72.76 KiB        24.45 KiB
  2.js
  dist/js/app~e2550e02.a015eb32.js          72.37 KiB        24.69 KiB
  dist/js/app~e73b60ec.1f08e19d.js          72.32 KiB        13.80 KiB
  dist/js/app~8f033120.7f8d0070.js          55.24 KiB        11.47 KiB
  dist/js/app~c714bc7b.b6f3c8c0.js          52.71 KiB        13.72 KiB
  dist/js/chunk-vendors~38d28a58.0a06a86    45.68 KiB        12.77 KiB
  c.js
  dist/js/chunk-vendors~62ab6885.cee5a37    43.71 KiB        11.66 KiB
  7.js
  dist/js/chunk-vendors~7d359b94.919ab50    39.50 KiB        14.41 KiB
  3.js
  dist/js/chunk-vendors~38e42790.4353017    25.09 KiB        7.40 KiB
  9.js
  dist/js/chunk-vendors~e811fd70.5c5aa3d    23.33 KiB        7.18 KiB
  e.js
  dist/js/chunk-vendors~0f485567.54c0f9a    16.32 KiB        5.07 KiB
  9.js
  dist/js/app~748942c6.3a3dd2ce.js          10.42 KiB        3.33 KiB
  dist/js/chunk-vendors~a9d51527.dfe7838    7.08 KiB         3.17 KiB
  a.js
  dist/js/app~bd29b02a.f902ffef.js          0.25 KiB         0.22 KiB
  dist/scss/material.teal-orange.min.css    138.02 KiB       20.32 KiB
  dist/scss/material.blue-pink.min.css      137.94 KiB       20.25 KiB
  dist/css/app~bd29b02a.9769b582.css        123.77 KiB       18.50 KiB
  dist/css/app~e73b60ec.339ebe67.css        18.88 KiB        3.25 KiB
  dist/css/app~8f033120.b1b606df.css        17.23 KiB        4.88 KiB
  dist/css/chunk-vendors~db300d2f.79c177    15.21 KiB        2.89 KiB
  b7.css
  dist/css/chunk-vendors~b5906859.bb3f78    8.27 KiB         1.96 KiB
  fa.css
  dist/css/chunk-vendors~ec8c427e.7f8930    6.28 KiB         1.45 KiB
  1a.css
  dist/css/app~748942c6.f39269dc.css        5.01 KiB         1.57 KiB
  dist/scss/auto-complete.css               0.64 KiB         0.36 KiB
  dist/css/app~ea265827.8239acf1.css        0.27 KiB         0.17 KiB

I am not sure if there are things that I am not thinking about here, or not. This seems to be an improvement for me, with modern caching. This article discusses it a bit more: https://medium.com/hackernoon/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758

[Serubin]

I think this is a great idea. This was on my list to fix as well.

I'll test this shortly.

[Serubin]

I don't know if it's worth making this change. The vendor payload is 440kb gzipped and Initial render occurs at 800ms. With the amount of dependencies we have, it may not be worth it to chunk it. If we do chunk, we should combine some of the vendor files so we aren't loading 15-20 with every application.