Webpack

Bundling for modern web applications

Addy Osmani
Addy Osmani

Modern web applications often use abundling tool to create a production"bundle" of files (scripts, stylesheets, etc.) that isoptimized,minifiedand can be downloaded in less time by your users. InWeb PerformanceOptimization with webpack, we will walk through how to effectively optimizesite resources usingwebpack. This can help usersload and interact with your sites more quickly.

Webpack logo.

webpack is one of the most popular bundling tools in use today. Taking advantageof its features for optimizing modern code,code-splittingscripts into critical and non-critical pieces and stripping out unused code (toname but a few optimizations) can ensure your app has a minimal network andprocessing cost.

Before and after applying JavaScript optimizations. Time-to-Interactive is improved  

Inspired by Code-splitting in Bundle Buddy by Susie Lu

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

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

Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2018-02-08 UTC.