[Webpack] — Smart Loading Assets For Production

Optimize

Recently, when we check our javascript error logs, we notice that there are several issues which are related to the “old browser” like

Uncaught ReferenceError: Promise is not definedUncaught ReferenceError: fetch is not defined

After discussion, we have two approaches:

1. When a user goes to specific routes which use a “modern” feature. We check whether a browser supports this feature or not. If not we will lazy load it.
2. Adding all-in-one polyfill (we choose babel-polyfill) into our js assets and loading it first before any of our js assets.

The approach one seems to add more complex into our project, we have to know which feature is not supported in “old browser” and have duplication in checking function for each route. One more important thing is our current codebase, we have to refactor to work this way. Therefore we prefer the approach two. The approach two’s problem is that we have to load polyfill even in case of “modern browser”. So, the way to optimize it is skipping polyfill we do it via lazy load like this:

_old_browser_ depends on which features you use. In our case, they are _Promise_, _fetch_

Currently, we use webpack to build our assets. Having the output like above we have to custom the build process in webpack(in this case html-webpack-plugin plugin), basically, the snippet looks like this:

I extract snippet code above and create a package here https://github.com/MQuy/html-webpack-condition-assets

This approach is not as good as the approach above in term of loading js assets, to improve that we can use the new feature preload. In the build process, we prepend js assets with format <link red="preload" ...> via preload-webpack-plugin

Finally, the template will look like this:

About webpack config, we can find more details here

MQuy/redux-boilerplate_redux-boilerplate - Redux Boilerplate (Node.js, Express, React, Redux, React-Router, Babel 6, PostCSS, Webpack)_github.com

Benchmark

After that, we use https://www.webpagetest.org/ to benchmark our results. We save 0.3s for “modern” browser. More details, you can check our benchmark

1. Load sync

https://www.webpagetest.org/result/170504_HD_15BD/ https://www.webpagetest.org/result/170504_QN_15EJ/ https://www.webpagetest.org/result/170504_KT_15HP/

2. Load condition async

https://www.webpagetest.org/result/170504_H3_15MN/ https://www.webpagetest.org/result/170504_VR_15Q1/ https://www.webpagetest.org/result/170504_38_15VF/

Hacker Noon is how hackers start their afternoons. We’re a part of the @AMIfamily. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.

To learn more, read our about page, like/message us on Facebook, or simply, tweet/DM @HackerNoon.

If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!