Webpack Advanced Techniques
Webpack: Build Performance
Webpack docs on ways to speed up builds.
How to make your webpack builds 10x faster
Slideshow that lists a number of approaches for making Webpack builds faster, such as narrowing scope, using the DllPlugin, using HappyPack for parallel builds, and more.
Advanced Frontend Optimization with Webpack
Slides by Webpack's original author, describing ways to improve Webpack builds.
Fixing annoying imports in React Projects
A quick example of using Webpack's module aliasing to simplify import paths, with further discussion in the comments.
Webpack Plugins we been keeping on the DLL
An overview of Webpack's DllPlugin, and how it can be used for faster dev builds.
DllPlugin usage summary
Notes from a user who wants to document his findings on usage of DllPlugin. Pretty thorough.
Implement Webpack DLL Plugin for React-Boilerplate
A PR adding usage of DllPlugin to React-Boilerplate. Thorough and well-commented - should be a very useful reference to anyone trying to set it up in their own project.
Explains how to use DllPlugin to pre-bundle vendor libraries for faster build times.
Manually Tuning Webpack Builds
Tips for cutting down bundle sizes by removing duplicate library instances and fine-tuning usage of various libraries.
Tips for faster Webpack builds
A Reddit comment with several useful tips to follow when trying to speed up builds
Formidable Labs describes their preferred approaches for configuring Webpack, including optimization approaches.
Webpack Performance: The Comprehensive Guide
An in-depth look at the parts that go into a Webpack build, and how each piece can be optimized for a faster build.
Speeding up Webpack performance with parallel builds
Describes a tool called
parallel-webpack, which can build multiple entry points in multiple formats in parallel.
A React + Webpack Optimization Case
Several useful examples of how to profile and optimize a Webpack-based project, including checking bundle contents, specific imports from libraries, ignoring Moment locales, and more.
Tree-shaking ES6 Modules in Webpack 2
A look at the concept of tree-shaking to reduce output size, how it relates to module formats, and how to configure Webpack to properly allow for tree-shaking
An explanation of what tree-shaking is, how to configure Webpack to apply it, and how it works.
How to optimize Moment.js with Webpack
Tips on using IgnorePlugin and ContextReplacementPlugin to strip out uneeded locales from Moment
Declaratively Rendering Earth in 3D, Part 1: Building a Cesium + React App with Webpack
Shows how to configure Webpack to load the Cesium 3D globe library, and how to set up a Webpack config that uses DllPlugin to build a separate bundle for Cesium.
Tree shake Lodash with Webpack, Jest, and Typescript
Walks through ways to configure Webpack and Babel to properly tree shake Lodash so that it only includes used functions.
Webpack for real tasks: decreasing front-end size and improving caching
Covers a variety of ways to improve bundle sizes, including minification with Uglify, tree shaking imports, referencing external libraries, and more.
Webpack 3 + React - Production Build Tips
General advice for improving Webpack builds, including code splitting, minification, and several more. Includes a complete Webpack config file at the end with the proper settings.
d-l-l: Easy, automatic, optimized DLL config handler for Webpack
An interview with the author of a tool for automatically generating DLL bundles, discussing how to use it and how it works.
High-performance webpack config for front-end delivery
Covers 7 optimizations you can add to a Webpack setup to build bundles faster and make them smaller.
Unpacking the Mysteries of Webpack
Recaps some high-level Webpack terms and concepts, and walks through several changes to speed up compilation and improve bundle size.
How to Improve Webpack Performance in Large Projects
Slides, audio, and summary of a talk on various ways to improve Webpack build performance, including disabling sourcemaps for dev builds, parallelizing work, and using DllPlugin.
How we improved Webpack build performance by 95%
https://blog.box.com/how-we-improved-webpack-build-performance-95 Tips for speeding up builds by using Babel caching, not exporting arrays of configs, and doing work in parallel.
Keep Webpack Fast: A Field Guide for Better Build Performance
An excellent article from Slack's frontend team, listing ways to improve Webpack build speed. Gives overviews of profiling, parallelization tools, reducing workloads, and caching, with plenty of mentions for specific tools and techniques.
Code Splitting and Chunking
React-Router and Webpack in Production
Tips on dynamically loading route views and optimizing chunk sizes
Webpack Async Bundle Loading
A quick look at how to delay-load some portion of your app's code.
Code Chunking with Webpack
Covers how to configure chunked bundles and dynamic bundle loading with Webpack and React-Router.
Dynamic Vendor Bundling in Webpack
An approach to dynamically adding anything from
node_modulesto a "vendor" bundle
Webpack Config: Commons Chunk Plugin part 1
An intro to what the Webpack Commons Chunk Plugin does and how it works
A beginner's step-by-step guide to Code Splitting with Webpack 2 and React Router
An excellent guide to concepts and configuration needed for code splitting.
Lazily Load Code Declaratively in React and Webpack
Demonstrates one way to request and render components on demand, using Webpack's bundle-loader
Building Vendor and Feature Bundles with Webpack
Demonstrates using DllPlugin to build a vendor bundle, and generating multiple bundles for different features by dynamically building up multiple entry points.
Components a la carte
Describes a technique for dynamically loading only certain features that a user should see
Dynamic Imports with Webpack 2
A quick example of how to use dynamic imports to load pages or components at runtime
Lazy Loaded React Components with Webpack 2
A follow-on to the previous article, showing how to extend the dynamic imports approach to lazily load and render components
Vendor and code splitting in Webpack 2
An excellent dive into multiple aspects of code splitting, including basic setup, advanced config, and some Webpack gotchas/tips.
How to use Webpack's new "magic comment" feature with React Universal Component + SSR
Introduces Webpack's new "magic comments" feature for defining chunk names, and shows how to use that in association with a couple of libraries for optimized server-side rendering approaches
React Universal Component 2.0 & babel-plugin-universal-import
Introduces some new Webpack addons and changes that enable dynamic import expressions, including use with SSR.
Impress Your Friends with Code Splitting in React
Examples of using
import()to lazy-load React components and display them after they're loaded.
ECMAScript Asychronicity - dynamic import
Recaps ES6 module behavior and use of Webpack's CommonsChunkPlugin, and describes how to lazy load code using
require.ensureand the new dynamic
Lazy Loading with React, Redux, and Webpack 2+
An excellent pair of posts that cover ways to structure components in terms of features, load them at runtime using Webpack's dynamic importing, and apply the same principles to loading Redux feature logic.
How to reduce your bundle size by automatically getting your dependencies from a CDN
A quick example of using the
dynamic-cdn-webpack-pluginto have your bundle reference libraries from the Unpkg CDN, rather than including them in the main bundle.
Webpack 3, Dynamic Imports, Code Splitting, and Long Term Caching Made Easy
Describes how to configure Webpack and use React-Loadable to set up code-splitting, as well as set up consistent module hash IDs.
Two Tips to Improve Performance by 30% with React and Webpack
Looks at ways the Teachers Pay Teachers team used async bundle loading and bundle size optimization to improve their load time.
Bundle Sizes and Visualization
Building Better Bundles http://blog.isquaredsoftware.com/2016/11/posts-on-packtpub-generic-redux-modals-and-building-better-bundles/
An article describing what
process.env.NODE_ENVmeans, and how it is used as part of a production build process to optimize build sizes
Chat discussion - summary of process.env.NODE_ENV and its use with Webpack
An overview of how the
process.env.NODE_ENVvariable is often used to define optimizations for Webpack production builds
Discussion of how to improve production configurations for smaller bundle sizes
"Vector.im bundle is too big - analysis"
Web perf expert Nolan Lawson analyzes why the JS bundle for the Vector.im web app is too big, and ways it could potentially be improved using code splitting and app structure changes. A good example of ways to improve bundle sizes.
Unlocking a Mystery: Visualizing the Common Webpack Bundles
A recap of some previous tools used to analyze Webpack bundle sizes, and description of a new tool they built to provide better bundle visualization
Analysing and minimising the size of client side bundle with Webpack and source-map-explorer
Tips on using source-map-explorer to check the size of code included in a minified bundle, and removing unneeded polyfills
How to use source-map-explorer with Webpack
Examples of using the source-map-explorer tool to visualize the contents of a bundle
Avoid Webpack bloat: Optimize your dependencies
Tips for tracking bundle sizes and managing dependency handling
Webpack bits: getting the most out of the CommonsChunkPlugin
Sean Larkin of the core Webpack team shares examples of common bundle size problems, and how to use the CommonsChunkPlugin to extract heavily used libraries into a separate bundle.
Weeding Out Your ES6 Webpack Bundle Sizes
A recap of how adding a couple libraries to a production app resulted in much larger bundles, and some practical steps that can be taken to investigate and improve bundle sizes
How Webpack's ContextReplacementPlugin works
An explanation of how ContextReplacementPlugin can be used to alter what files Webpack loads into a bundle.
How to do proper tree-shaking in Webpack 2
Explains several important concepts related to tree shaking, and how to configure Webpack and other tools to ensure it happens correctly.
3 ways to reduce Webpack bundle size
A quick summary of some possible approaches to optimize bundle sizes, with links to more information
Introducing Bonsai: an open source Webpack analyzer
The Pinterest team describes the problems they'd encountered optimizing their Webpack bundles, and introduces a new tool to help analyze bundles and dependency trees.
Size Limit: Make the Web Lighter
Demonstrates writing a tiny library that results in a 100KB Webpack bundle, and then walks through improving the Webpack settings to improve bundle size to only 17B.
Put Your Webpack Bundle On A Diet
A multi-part series that covers approaches for shrinking bundle size, ranging from simply using Webpack's -p flag up to advanced optimizations.
What Lurks Within: Reducing Bundle Sizes with Webpack Bundle Analyzer
Tips for using the Webpack Bundle Analyzer tool to track down large dependencies.
Webpack Bundle Analysis - A necessary step for all React / Angular / Vue developers!
Walks through the process of analyzing an Angular bundle and improving build steps to cut down on bundle size.
Hot Module Replacement
Webpack and Hot Module Replacement
A great in-depth walkthrough of how HMR works
Webpack's HMR and React Hot-Loader - The Missing Manual
https://rajaraodv.medium.com/webpacks-hmr-react-hot-loader-the-missing-manual-232336dc0d96 Demonstrates three ways to enable HMR, and usage with three different React application scenarios
Hot Reloading in React
Dan Abramov walks through the history of his React Hot Loader and React Transform tools, describes their implementation, flaws, and weaknesses, and looks at a potential solution (later implemented in React Hot Loader 3.0).
HMR Tutorial Series
A very readable and informative series of articles on using HMR.
Blogged Answers: Webpack HMR vs React-Hot-Loader
A description of the differences between the HMR API offered by Webpack and how the React-Hot-Loader tool works, and advice on using "plain HMR".
SurviveJS: Hot Module Replacement
A guide to HMR concepts and usage, written by a Webpack core team member
Some interesting and advanced tricks for ways HMR could be used.
Using React with "plain" Webpack HMR
Dan Abramov removes use of the React-Transform plugin from Redux's examples, and demonstrates how to use the "plain" Webpack HMR API to do reloading of updated components, reducers, and other code.
Basic HMR Usage Example
An extracted example demonstrating using "plain" HMR to reload components, reducers, and even sagas.
React - Hot Module Reload
An explanation of how to set up HMR using React-Hot-Loader 3.0
Adding HMR to Create-React-App
A quick example of the basic pattern for using plain HMR with Webpack
Webpack Hot Reloading and React
An explanation of how Hot Reloading works, and how the various pieces fit together.
ReactCasts #7: Hot Module Replacement in Create-React-App
A screencast talking about what HMR is, and two ways to add it to projects created with Create-React-App
"Difference between Webpack HMR and React-Hot-Loader?"
Dan Abramov clarifies that HMR is the API and capability that Webpack gives you, while React-Hot-Loader is a specialized tool that uses the HMR API to automatically add HMR handling to React code.
Hot reload all the things!
A tutorial that shows how to use Webpack and HMR to hot-reload both front-end and back-end code for faster development.
How to Hot-Load React Components in 7 Days
A 2-part article that discusses how to set up plain HMR and add React-Hot-Loader, as well as many of the complexities of using RHL.
Hot reloading in React apps with code splitting
Looks at complexities in using RHL and React-Loadable together, and shows a Babel plugin that can help turn off code-splitting in development mode.
Other Tips and Examples
A video course by Kent C. Dodds, covering a number of very useful Webpack techniques for real-world apps. Requires an Egghead subscription, but solid and useful info.
Tumblr's dev team talks about switching from Browserify to Webpack, their migration steps, and some useful tips learned about pieces like CommonsChunkPlugin.
Webpack HTML plugin in a Nutshell
Looks at what the HTML Webpack plugin can do and how to use it.
Truly Multiple Entries with Webpack
Instructions on how to configure multiple entry points properly
Long-term caching of static assets with Webpack
Gathers documentation on proper use of asset caching into one article to act as a complete guide.
Using the HTML Webpack Plugin for generating HTML files
https://www.jackfranklin.co.uk/blog/webpack-html-plugin/ Basic instructions for setting up the HTML Webpack plugin
Setting up CSS Modules with React and Webpack
https://www.jackfranklin.co.uk/blog/css-modules-webpack-react/ Covers setting up and configuring Webpack to use CSS Modules for styling
A useful list of tips for improving Webpack usage
Useful Webpack DefinePlugin Usage
Several useful tips and use cases for using the Webpack DefinePlugin, including logging, feature flags, and handling multiple environments
Artsy Webpack Tour
Sean Larkin of the Webpack core team gives a visually annotated tour of the Webpack 2 source code
Squeezing Webpack into backend frameworks
Covers how to use Webpack to replace the Rails asset pipeline
Easy Offline First Apps with Webpack's Offline Plugin
A look at how to use the OfflinePlugin to cache Webpack-generated assets for offline use.
Predictable long term caching with Webpack
A detailed look at issues that cause caching problems, and how to configure Webpack to get consistent chunk definitions for good caching results
Environment based application configuration using Webpack
An explanation of how environment-based configuration is useful, and a couple examples of ways to handle config files for varying environments.
From Grunt and Bower to Webpack, Babel, and Yarn - Migrating a legacy front-end build system
A recap of the steps needed to migrate an Angular app's build system to Webpack, including managing imports, handling global variables, and code splitting.
Case study: improving the Polished size for Webpack users
A detailed investigation of bundle size issues for the Polished library, and steps taken to improve the sizes for distribution.
Unambiguous Webpack Config with Typescript
Shows how to use Typescript and type definitions to ensure correct setup of Webpack configs.
Webpack 2 & Semantic-UI Theming
Discusses how to configure Webpack to load Semantic-UI's LESS files to allow use of a custom theme.
Webpack: Creating dynamically named outputs for wildcarded entry files
Demonstrates a useful technique for collecting files based on globbing, and generating Webpack entry definitions from those files.
Tips for improving bundle size by using syntax supported natively by browsers, as well as other techniques for improving bundle output.
Deploying ES2015+ Code in Production Today
Discusses a way to use
script type="module"loading as a way to determine if a browser supports most modern syntax, and how to configure Babel to target modern browsers. Not Webpack specific, but useful.
Long term caching using Webpack records
Looks at how to use the RecordsPlugin to ensure consistent filenames between builds, allowing for more predictable bundle output for long-term caching of files.
The Contributor's Guide to Webpack
A series by Webpack maintainer Sean Larkin that dives into the internals of Webpack. Topics include packages that are maintained by the Webpack core team, the Tapable plugin base class, and how Webpack builds its dependency graph.
A CLI dashboard for your webpack dev server
A tool and plugin to visualize the (pre-minified) sizes of files in a Webpack bundle
Webpack Bundle Analyzer
Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap, and can parse minified bundles to show true minified (and gzipped) sizes