Bundling for modern web applications


![Addy Osmani](https://web.dev/images/authors/addyosmani.jpg) Addy Osmani [X](https://twitter.com/addyosmani) [GitHub](https://github.com/addyosmani) [Bluesky](https://bsky.app/profile/addyosmani.bsky.social)

<br />

Modern web applications often use a **bundling tool** to create a production
"bundle" of files (scripts, stylesheets, etc.) that is
[optimized](https://web.dev/articles/optimizing-content-efficiency-javascript-startup-optimization.md.txt),
[minified](https://web.dev/articles/optimizing-content-efficiency-optimize-encoding-and-transfer.md.txt)
and can be downloaded in less time by your users. In **Web Performance
Optimization with webpack** , we will walk through how to effectively optimize
site resources using [webpack](https://webpack.js.org/). This can help users
load and interact with your sites more quickly.
![Webpack logo.](https://web.dev/static/articles/webpack/image/webpack-logo.png)

webpack is one of the most popular bundling tools in use today. Taking advantage
of its features for optimizing modern code,
[code-splitting](https://web.dev/articles/use-long-term-caching.md.txt#lazy-load_code_that_you_dont_need_right_now)
scripts into critical and non-critical pieces and stripping out unused code (to
name but a few optimizations) can ensure your app has a minimal network and
processing cost.
![Before and after applying JavaScript
optimizations. Time-to-Interactive is improved](https://web.dev/static/articles/webpack/image/before-after-applying-ja-4050ad9acad04.png)

Inspired by [Code-splitting in Bundle Buddy](http://www.susielu.com/data-viz/bundle-buddy) by Susie Lu

> [!NOTE]
> **Note:** We created a training app to play with optimizations described in this article. Try squeezing the most out of it to practice the tips: [`webpack-training-project`](https://github.com/GoogleChromeLabs/webpack-training-project)

Let's get started by looking at optimizing one of the costliest resources in a
modern app -- JavaScript.

- [Decrease Front-end
  Size](https://web.dev/articles/decrease-frontend-size)
- [Make Use of Long-term
  Caching](https://web.dev/articles/use-long-term-caching)
- [Monitor and analyze the
  app](https://web.dev/articles/monitor-and-analyze)
- [Conclusions](https://web.dev/articles/webpack-conclusion.md.txt)