Skip to content
Learn Measure Blog Case studies About
  • Home
  • All articles

Webpack

Bundling for modern web applications

Feb 8, 2018 — Updated Aug 17, 2018
Addy Osmani
Addy Osmani
TwitterGitHub

Modern web applications often use a bundling tool to create a production "bundle" of files (scripts, stylesheets, etc.) that is optimized, minified 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. This can help users load and interact with your sites more quickly.

Webpack logo.

webpack is one of the most popular bundling tools in use today. Taking advantage of its features for optimizing modern code, code-splitting 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  

Inspired by Code-splitting in Bundle Buddy by Susie Lu

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

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

  • Decrease Front-end Size
  • Make Use of Long-term Caching
  • Monitor and analyze the app
  • Conclusions
Last updated: Aug 17, 2018 — Improve article
Return to all articles
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.