awesome-webpack-perf

in the webpack config enables the common production optimizations

in the webpack config enables splitting one bundle into smaller chunks. This helps to load less JS for each page and cache better

in the webpack config enables splitting webpack’s runtime code into a separate chunk. This improves long-term caching

– Uglify is an ES5 minifier

– Terser is a fork of Uglify that has support for ES2015+. Ships with webpack

– Babel Minify is a minifier built in the Babel pipeline. It supports all syntax Babel supports

– Closure Compiler is a minifier developed by Google. It has several advanced optimizations that are unsafe for some apps but compress better

– ESBuild is a JS&TS compiler/minifier written in Go. It’s ~50-100× faster

is a PostCSS plugin that can be used with

only works when you use . However, it compresses CSS better than the loader – e.g., it can merge rules from multiple source files

is a PostCSS plugin that can be used with

, technically, works with any minifier, but ships (and works best) with . This plugin only works when you use . However, it compresses CSS better than the loader – e.g., it can merge rules from multiple source files

is a PostCSS plugin that can be used with

analyzes the app code and styles and removes CSS rules that aren’t used anywhere. Works great with CSS frameworks like Bootstrap

is the de-facto default solution for extracting styles in modern webpack

was the most popular plugin for extracting styles in webpack 1-3

has the same API as but offers better hot module replacement support

runs the tool on every webpack build. Uses a headless browser, returns styles only for

renders HTML in a JSDom environment on every webpack build. Doesn’t use a headless browser (= less heavy); returns all styles needed by the page, not only the above-the-fold ones (= may fix some glitches)

helps to extract critical styles during server-side rendering

works with all CSS-in-JS libraries thanks to regex-based matching. Does basic compression of style strings

: works with and ( )

: works with and ( )

optimizes images by passing them through

combines multiple images into a single sprite

converts images to the format

downloads Google Fonts to the build directory for self-hosting

minifies icon fonts to just what’s used

works for Gzip and Brotli

works for Brotli

preloads asynchronous chunks¹ with or

adds for a separate domain (e.g., an API server)

adds or attributes to bundle scripts

generates a and resizes app icons for a PWA

Awesome WPO

– A curated list of Web Performance Optimization

Webpack Libs Optimizations

– A collection of Babel and webpack plugins to optimize the size of various popular libraries