Improving Webpack build performance and verbosity

In previous article we set up a simple single page application with routing and web pack builds.

Now we extend the application with better logic and using more web pack features and tools.

Analyzing the builds

Currently app is relatively small and we don’t get any really big files.

                         Asset       Size  Chunks                    Chunk Names
     0.6bcce77c5e562c64a428.js    76.8 kB       0  [emitted]
     1.6bcce77c5e562c64a428.js    76.8 kB       1  [emitted]
   app.6bcce77c5e562c64a428.js     487 kB       2  [emitted]  [big]  app
style.6bcce77c5e562c64a428.css     135 kB       2  [emitted]         app
                    index.html  380 bytes          [emitted]

So let’s ”harden” it with some additional features.

$ npm i highlight.js remarkable moment lodash

All these libraries we include in different parts of the application. You can see their usage in This commit: rkgrep/spa-tutorial@af3f57c

Now, after we run build we receive much different stats:

Hash: e97129f3c59b62c46515
Version: webpack 3.5.5
Time: 3347ms
                         Asset       Size  Chunks                    Chunk Names
     0.e97129f3c59b62c46515.js     864 kB       0  [emitted]  [big]
     1.e97129f3c59b62c46515.js     818 kB       1  [emitted]  [big]
     2.e97129f3c59b62c46515.js    1.08 MB       2  [emitted]  [big]
   app.e97129f3c59b62c46515.js     501 kB       3  [emitted]  [big]  app
style.e97129f3c59b62c46515.css     135 kB       3  [emitted]         app
                    index.html  380 bytes          [emitted]

So what can we do with that?