awesome-webpack-perf

Webpack perf optimizer

A curated collection of tools and plugins to optimize web performance using Webpack

A curated list of webpack tools for web performance

GitHub
957 stars
27 watching
25 forks
last commit: over 4 years ago
Linked from 2 awesome lists


Awesome Webpack Perf / Built-in stuff
mode: 'production' in the webpack config enables the common production optimizations
optimization.splitChunks in the webpack config enables splitting one bundle into smaller chunks. This helps to load less JS for each page and cache better
optimization.runtimeChunk in the webpack config enables splitting webpack’s runtime code into a separate chunk. This improves long-term caching

Awesome Webpack Perf / JS minifiers
uglifyjs-webpack-plugin – Uglify is an ES5 minifier
terser-webpack-plugin – Terser is a fork of Uglify that has support for ES2015+. Ships with webpack
babel-minify-webpack-plugin – Babel Minify is a minifier built in the Babel pipeline. It supports all syntax Babel supports
closure-webpack-plugin – Closure Compiler is a minifier developed by Google. It has several advanced optimizations that are unsafe for some apps but compress better
esbuild-webpack-plugin – ESBuild is a JS&TS compiler/minifier written in Go. It’s ~50-100× faster

Awesome Webpack Perf / CSS / Minifiers
csso-loader
postcss-csso is a PostCSS plugin that can be used with
csso-webpack-plugin only works when you use . However, it compresses CSS better than the loader – e.g., it can merge rules from multiple source files
cssnano is a PostCSS plugin that can be used with
optimize-css-assets-webpack-plugin , 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
clean-css-loader
postcss-clean is a PostCSS plugin that can be used with

Awesome Webpack Perf / CSS / Other optimizers
purgecss-webpack-plugin analyzes the app code and styles and removes CSS rules that aren’t used anywhere. Works great with CSS frameworks like Bootstrap

Awesome Webpack Perf / CSS / Extraction plugins
mini-css-extract-plugin is the de-facto default solution for extracting styles in modern webpack
extract-text-webpack-plugin was the most popular plugin for extracting styles in webpack 1-3
extract-css-chunks-webpack-plugin has the same API as but offers better hot module replacement support

Awesome Webpack Perf / CSS / Critical CSS plugins
html-critical-webpack-plugin runs the tool on every webpack build. Uses a headless browser, returns styles only for
critters-webpack-plugin 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)
isomorphic-style-loader helps to extract critical styles during server-side rendering

Awesome Webpack Perf / CSS-in-JS / Minification
minify-cssinjs-loader works with all CSS-in-JS libraries thanks to regex-based matching. Does basic compression of style strings
babel-plugin-styled-components
babel-plugin-emotion

Awesome Webpack Perf / CSS-in-JS / Zero-runtime libraries
linaria : works with and ( )
astroturf : works with and ( )

Awesome Webpack Perf / Images / Image compression tools: universal
image-webpack-loader
img-loader
imagemin-webpack
imagemin-webpack-plugin

Awesome Webpack Perf / Images / Image compression tools: for a single format
svgo-loader optimizes images by passing them through
svg-sprite-loader combines multiple images into a single sprite
webp-loader converts images to the format

Awesome Webpack Perf / Fonts
google-fonts-webpack-plugin downloads Google Fonts to the build directory for self-hosting
fontmin-webpack minifies icon fonts to just what’s used

Awesome Webpack Perf / Gzip/Brotli
compression-webpack-plugin works for Gzip and Brotli
brotli-webpack-plugin works for Brotli
preload-webpack-plugin preloads asynchronous chunks¹ with or
html-webpack-preconnect-plugin adds for a separate domain (e.g., an API server)
script-ext-html-webpack-plugin adds or attributes to bundle scripts

Awesome Webpack Perf / Prerendering
prerender-spa-plugin
prerender-loader

Awesome Webpack Perf / Progressive web apps (PWA)
webpack-pwa-manifest generates a and resizes app icons for a PWA

Awesome Webpack Perf / Other web performance lists
Awesome WPO 8,397 over 1 year ago – A curated list of Web Performance Optimization
Webpack Libs Optimizations 3,362 almost 3 years ago – A collection of Babel and webpack plugins to optimize the size of various popular libraries

Backlinks from these awesome lists:

More related projects: