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

DevFeed: [How to Make Your Web App More Reliable and Performant Using webpack: a Yahoo Mail Case Study](<https://devfeed.tech/articles/how-to-make-your-web-app-more-reliable-and-performant-using-webpack-a-yahoo-mail-case-study-20482.md>)

Original publisher: [Read original article](<https://yahooeng.tumblr.com/post/168508200981>)

Author: mikesefanov

Published: 2017-12-13T18:27:36Z

Content type: tutorial

Language: en

Sources: [Yahoo](<https://devfeed.tech/sources/yahoo.md>)

Topics: [Webpack](<https://devfeed.tech/topics/webpack.md>), [web applications](<https://devfeed.tech/topics/web-applications.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Development](<https://devfeed.tech/topics/development.md>)

Tags: [case-study](<https://devfeed.tech/tags/case-study.md>), [css](<https://devfeed.tech/tags/css.md>), [dependency](<https://devfeed.tech/tags/dependency.md>), [developers](<https://devfeed.tech/tags/developers.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [oath](<https://devfeed.tech/tags/oath.md>), [web-app](<https://devfeed.tech/tags/web-app.md>), [webpack](<https://devfeed.tech/tags/webpack.md>), [yahoo](<https://devfeed.tech/tags/yahoo.md>), [yahoo-engineering](<https://devfeed.tech/tags/yahoo-engineering.md>), [yahoo-mail](<https://devfeed.tech/tags/yahoo-mail.md>)

## AI overview

This Yahoo Mail case study explains how the team adopted webpack as its JavaScript module bundler to improve development cycles, reliability, and performance at scale. It describes webpack's dependency-graph and bundling model, plugin selection and development, Grunt integration, and bundle optimization before production deployment.

## Source excerpt

yahoodevelopers: By Murali Krishna Bachhu, Anurag Damle, and Utkarsh Shrivastava As engineers on the Yahoo Mail team at Oath, we pride ourselves on the things that matter most to developers: faster development cycles, more reliability, and better performance. Users don't necessarily see these elements, but they certainly feel the difference they make when significant improvements are made. Recently, we were able to upgrade all three of these areas at scale by adopting webpack® as Yahoo Mail's underlying module bundler, and you can do the same for your web application. What is webpack? webpack is an open source module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs. Then it packages all of those modules into a small number of bundles, often only one, to be loaded by the browser. webpack became our choice module bundler not only because it supports on-demand loading, multiple bundle generation, and has a relatively low runtime overhead, but also because it is better suited for web platforms and NodeJS apps and has great community support. Comparison of webpack to other open source bundlers How did we integrate webpack? Like any developer does when integrating a new module bundler, we started integrating webpack into Yahoo Mail by looking at its basic config file. We explored available default webpack plugins as well as third-party webpack plugins and then picked the plugins most suitable for our application. If we didn't find a plugin that suited a specific need, we wrote the webpack plugin ourselves (e.g., We wrote a plugin to execute Atomic CSS scripts in the latest Yahoo Mail experience in order to decrease our overall CSS payload**). During the development process for Yahoo Mail, we needed a way to make sure webpack would continuously run in the background. To make this happen, we decided to use the task runner Grunt. Not only does Grunt