awesome-webpack-perf
A curated list of webpack tools for web performance
https://github.com/iamakulov/awesome-webpack-perf
Last synced: 5 days ago
JSON representation
-
Built-in stuff
-
JS minifiers
- `uglifyjs-webpack-plugin`
- `terser-webpack-plugin`
- `babel-minify-webpack-plugin`
- `closure-webpack-plugin`
- `esbuild-webpack-plugin` - 100× faster [compared to native JavaScript tools](https://github.com/evanw/esbuild#javascript-benchmark).
-
CSS
-
Minifiers
- `csso-loader`
- `postcss-csso` - loader`](https://www.npmjs.com/package/postcss-loader)
- `cssnano` - loader`](https://www.npmjs.com/package/postcss-loader)
- `optimize-css-assets-webpack-plugin`
- `clean-css-loader`
- `postcss-clean` - loader`](https://www.npmjs.com/package/postcss-loader)
- `csso-webpack-plugin` - plugins). However, it compresses CSS better than the loader – e.g., it can merge rules from multiple source files
-
Other optimizers
-
Extraction plugins
- `mini-css-extract-plugin` - facto default solution for extracting styles in modern webpack
- `extract-text-webpack-plugin` - 3
- `extract-css-chunks-webpack-plugin` - css-extract-plugin` but offers better hot module replacement support
-
Critical CSS plugins
- More details
- `html-critical-webpack-plugin` - the-fold content](https://whatis.techtarget.com/definition/above-the-fold)
- `critters-webpack-plugin` - the-fold ones (= may fix some `html-critical-webpack-plugin` glitches)
- `isomorphic-style-loader` - side rendering
-
-
CSS-in-JS
-
Minification
- `minify-cssinjs-loader` - in-JS libraries thanks to regex-based matching. Does basic compression of style strings
- babel-plugin-styled-components
- babel-plugin-emotion
-
Zero-runtime libraries
- brings noticeable performance costs
- `linaria` - css-extract-plugin` ([instructions](https://github.com/callstack/linaria/blob/master/docs/BUNDLERS_INTEGRATION.md#webpack))
- `astroturf` - css-extract-plugin` ([instructions](https://github.com/4Catalyzer/astroturf#setup))
-
-
Images
-
Image compression tools: universal
- `imagemin`
- `image-webpack-loader` - webpack-loader)
- `img-loader` - loader)
- `imagemin-webpack` - webpack)
- `imagemin-webpack-plugin` - webpack-plugin)
-
Image compression tools: for a single format
-
Other tools
- `lqip-loader` - quality image placeholders which you can use for lazy-loading images. Just like in Medium:
- `responsive-loader`
- `svg-url-loader` - 30% smaller `data`-urls for inline SVG images
-
-
Fonts
-
Other tools
-
-
Gzip/Brotli
-
Other tools
-
-
Service workers
-
`<link rel>` and `<script async>`
-
Prerendering
-
Other tools
-
-
Progressive web apps (PWA)
-
Other tools
-
-
Analysis tools
-
Bundle contents
- `webpack-bundle-analyzer`
- `bundle-wizard` - map-explorer`, it does that for a full page and includes all bundles:
- Webpack Visualizer - -json > stats.json`). It lets you upload the `stats.json` file and see the bundle contents:
- `source-map-explorer` - bundle-analyzer` – but you don’t need to reconfigure webpack to run it:
-
Code duplicates
- Bundle Buddy - tune code splitting:
- `duplicate-package-checker-webpack-plugin`
-
Various tools
-
-
Webpack build performance
-
Various tools
-
-
Other web performance lists
-
Various tools
-
Programming Languages
Categories
Sub Categories