TechPrufer
Sign inGet started

Blogs›Yahoo›Yahoo Mail Web App Performance and Reliability with Webpack

Yahoo Mail Web App Performance and Reliability with Webpack

Yahoo Mail Web App Performance and Reliability with Webpack

2
posts
2017

Yahoo Mail has significantly improved its web application's reliability and performance by adopting a new tech stack including React, Redux, and Node.js. This migration led to faster development cycles by reducing code reflection time from minutes to seconds, enhanced reliability by shifting JavaScript bundle generation from runtime to build time, and improved performance through substantial reductions in gzipped JavaScript payload size, server-side render time, and overall launch performance metrics. Key optimizations include proximity-based routing, server-side rendering with isomorphic JavaScript, efficient bundling strategies, improved CSS reuse with react-atomic-css, and the use of Mendel for bucket testing. The new stack also reduced JavaScript and CSS footprint by approximately 50%, improved memory consumption, and achieved a 99.99% success rate on core flows. Additionally, the team open-sourced Mendel, their solution for bucket testing isomorphic web applications.

2017

How to Make Your Web App More Reliable and Performant Using webpack: a Yahoo Mail Case Study

12/13/2017

This post details the integration of webpack into Yahoo Mail's development workflow. It covers the selection of webpack due to its on-demand loading and multiple bundle generation capabilities, the use of Grunt as a task runner for dynamic webpack configuration, optimization of JavaScript bundles using UglifyJS, and the development of a custom webpack plugin and loader for optimized CSS generation with Atomizer. The post quantifies improvements in development speed, reliability (fewer exceptions), and performance (reduced payload size, server-side render time, and launch metrics).

Yahoo Mail’s New Tech Stack, Built for Performance and Reliability

6/27/2017

This post details the adoption of a new tech stack for Yahoo Mail, including React, Redux, and Node.js, focusing on performance and reliability improvements. It introduces proximity-based routing, server-side rendering with isomorphic JavaScript, efficient bundling strategies (application, vendor, lazy-loaded), improved CSS reuse via react-atomic-css, and the use of Mendel for bucket testing isomorphic web apps. These changes resulted in a ~50% reduction in JavaScript and CSS footprint, faster launch times, reduced memory consumption, and a 99.99% success rate on core flows. The post also highlights the open-sourcing of Mendel.