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:
- 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.
- 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
- 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!