Support loading chunks asynchronously to reduce the upfront bundle size

[resolritter]

Hello!

I've been reading the Webpack tutorial and when I build the project, it warns me that the compiled assets' size is slightly higher than the recommended upper limit for bundle sizes (which is around 240kb).

https://webpack.js.org/guides/code-splitting/ https://webpack.js.org/loaders/bundle-loader/

I've started to fiddle with it a bit and I've been able to develop something in my branch:

https://github.com/jpsouzasilva/typescript-react-starter-kit/blob/demo-lazy-bundle/src/components/App/Root.tsx#L26

Since errors don't always happen, it only requires react-redbox when an exception is actually caught. The react-redbox import is inside one of the app's lazy bundle files (lazy.bundle.js) so it's bundled separately. It reduces the upfront vendor size from 255~ kb to 201kb~.

Built at: 2018-10-07 23:46:26                                                                             
                           Asset       Size  Chunks             Chunk Names
                    main.css.map   16.4 KiB       0  [emitted]  main
                        main.css   6.93 KiB       0  [emitted]  main
                  lazy.bundle.js  145 bytes       1  [emitted]  lazy.bundle
                       vendor.js    201 KiB       2  [emitted]  vendor
          vendors~lazy.bundle.js     33 KiB       3  [emitted]  vendors~lazy.bundle
    main-6893b3aef4fbe0dec6b0.js     12 KiB       0  [emitted]  main
main-6893b3aef4fbe0dec6b0.js.map   27.6 KiB       0  [emitted]  main
              lazy.bundle.js.map  294 bytes       1  [emitted]  lazy.bundle
                   vendor.js.map    618 KiB       2  [emitted]  vendor
      vendors~lazy.bundle.js.map    159 KiB       3  [emitted]  vendors~lazy.bundle
                      index.html  412 bytes          [emitted]  
Entrypoint main = vendor.js vendor.js.map main.css main-6893b3aef4fbe0dec6b0.js main.css.map main-6893b3aef4fbe0dec6b0.js.map

The branch is set up as a demo currently so you can see that an exception gets caught right away and it requires the package on-demand correctly.

[hyldmo]

Looks great! I think adding more lazy loading of stuff like this would be a good idea, and is probably something quite a few developers could want in a starter kit. I'm kinda overworked at the moment, but if you have time feel free to create a PR upstream and I'll take a look :)

[resolritter]

I could probably go around the project and see if any more dependencies could be also lazy loaded, then open a PR with that.

@hyldmo Since you are here, kind of a unrelated question: do you use any flags for managing your dependencies with yarn? I googled a bit, could you be using --frozen-lockfile or something like that? Because when I install the dependencies, it adds a bunch of "integrity" fields which aren't there in your file. Any way to prevent it?

[hyldmo]

Ah, that's just me having an old version of yarn 😅 The lockfile should actually contain the integry fields. If you look at the yarn.lock file in master now, it should contain them as well. Apologies for the confusion!