split up bundled code

[adambreznicky]

as per prod build warning, the compiled assets of .js and .css code files are pretty large. various parts of the app should be split up into separate bundles to meet recommended limit:

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  e7e5471d42a845f5745f000f529a0f51.png (275 KiB)
  scripts.js (5.74 MiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (5.96 MiB)
      styles.css
      scripts.js


WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

[adambreznicky]

tried utilizing the optimization SplitChunksPlugin to split up the main bundle into numerous smaller bundles.

currently, bundled js/css files are hard coded within index.html so in order to use the splitchunkplugin, it requires utilizing the HtmlWebpackPlugin also since htmlwebpackplugin injects the unpredictable bundle file references into index.html on build. a side effect is that this method will dump all files, including index.html, into the same folder so bundled js/css won't be nested within a /assets/ subdirectory (not a real problem, but will change the deployment).

ultimately, going down this road successfully splits apart the bundle with the exception of 2 large split-bundle files which won't be reduced below .5mb & 2mb respectively... so i'm not sure implementing this is truly worth it.
the aws-sdk is definitely a significant player in the large bundle size. webpack-bundle-analyzer shows this package as an enormous portion of the bundle.