Optimize Recently, when we check our error logs, we notice that there are several issues which are related to the “old browser” like javascript 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 “ ” feature. We check whether a browser supports this feature or not. If not we will lazy load it. modern Adding all-in-one polyfill (we choose ) into our js assets and loading it first before any of our js assets. babel-polyfill 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 plugin), basically, the snippet looks like this: html-webpack-plugin 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 . In the build process, we prepend js assets with format via preload <link red="preload" ...> preload-webpack-plugin Finally, the template will look like this: About webpack config, we can find more details here _redux-boilerplate - Redux Boilerplate (Node.js, Express, React, Redux, React-Router, Babel 6, PostCSS, Webpack)_github.com MQuy/redux-boilerplate Benchmark After that, we use to benchmark our results. We save 0.3s for “modern” browser. More details, you can check our benchmark https://www.webpagetest.org/ 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/ is how hackers start their afternoons. We’re a part of the family. We are now and happy to opportunities. Hacker Noon @AMI accepting submissions discuss advertising & sponsorship To learn more, , , or simply, read our about page like/message us on Facebook tweet/DM @HackerNoon. If you enjoyed this story, we recommend reading our and . Until next time, don’t take the realities of the world for granted! latest tech stories trending tech stories

Facebook

Fetch

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

[Webpack] — Smart Loading Assets For Production

Too Long; Didn't Read

Companies Mentioned

Minh Quy

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

[Webpack] — Smart Loading Assets For Production

Too Long; Didn't Read

Companies Mentioned

Minh Quy

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES