awesome-webpack-perf

by iamakulov

A curated list of webpack tools for web performance

757 Stars 20 Forks Last release: Not found 18 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Awesome Webpack Perf Awesome

A curated list of webpack tools and plugins that help make the web faster

Contents

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

JS minifiers

JS minifiers are tools that make JS payloads smaller.

CSS

Minifiers

CSS minifiers are tools that make the volume of CSS smaller.

There’re three popular competing CSS minifiers: CSSO, CSS Nano and Clean CSS. They’re mostly similar in the compression quality and supported features, so if you’re picking one, just choose the one you prefer more.

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

Extraction plugins

By default (with a simple

style-loader
), all styles imported in the app are added into the JS bundle. CSS extraction plugins help to move these styles into a separate
.css
file – which helps with faster rendering and better caching.

Critical CSS plugins

Critical CSS is an approach for rendering the site faster. With Critical CSS, for each page, you extract the rules needed for the initial render and inline them. Then, you load the remaining styles asynchronously. More details

CSS-in-JS

Minification

CSS-in-JS libraries typically provide Critical CSS support out of the box and need fewer manual optimizations. However, they still need minification.

Zero-runtime libraries

Most CSS-in-JS libraries ship with a runtime – a chunk of JavaScript that runs in the browser and makes the library work. That makes them easy to use but brings noticeable performance costs.

However, there’re also several CSS-in-JS libraries that don’t use a runtime and don’t suffer from worse performance. They rely on build-time transformations instead:

Images

Image compression tools: universal

All the tools below optimize

.png
,
.jpg
,
.gif
and
.svg
images. They’re based on
imagemin
and imagemin plugins, so they typically result in a similar level of compression.

Pick plugins over loaders. Plugins will optimize images that were produced by other loaders or plugins, whereas loaders will only trigger for files from your source code.

Image compression tools: for a single format

The below tools focus on a specific format of images.

Other tools

  • lqip-loader
    generates low-quality image placeholders which you can use for lazy-loading images. Just like in Medium:

  • responsive-loader
    resizes one image to multiple various sizes. Works great with
    or
  • svg-url-loader
    generates 20-30% smaller
    data
    -urls for inline SVG images

Fonts

Gzip/Brotli

Gzip/Brotli compressors compress text so it’s smaller when served over the network.

Normally, this is done by a server like Apache or Nginx on runtime; but you might want to pre-build compressed assets to save the runtime cost.

Service workers

  • service-worker-loader
    takes a file, emits it separately from the bundle, and exports a function to register the file as a service worker:
  import registerServiceWorker from 'service-worker-loader!./sw.js';

registerServiceWorker({ scope: '/' });

  • workbox-webpack-plugin
    prefetches all webpack assets in the background and makes the app ready for working offline. It is based on Google’s
    workbox
    library that simplifies common usages of service workers

  • offline-plugin
    also prefetches all webpack assets in the background and makes the app ready for working offline. It falls back to AppCache in browsers that don’t support service workers

 and 

¹ Asynchronous chunks are chunks that are created when you use

import()
.

Prerendering

Prerendering tools run an app during the build and return the HTML the app generates. This is an alternative to server-side rendering and helps to deliver the content to the user immediately – instead of making them wait until the bundle is loaded.

Progressive web apps (PWA)

Analysis tools

Bundle contents

The following tools show relative sizes of all bundled modules. Use them to figure out what takes so much size and can be removed:

  • webpack-bundle-analyzer
    is a webpack plugin. During the build, it generates an interactive HTML page with all bundle modules:

(Animation credits:

webpack-bundle-analyzer
)

  • Webpack Visualizer is a website that operates on webpack stats (
    webpack --json > stats.json
    ). It lets you upload the
    stats.json
    file and see the bundle contents:

  • source-map-explorer
    is a CLI tool that generates bundle stats based on source maps. It’s less detailed than
    webpack-bundle-analyzer
    – but you don’t need to reconfigure webpack to run it:

(Image credits:

source-map-explorer
)

  • bundle-wizard
    is a CLI tool that also generates bundle stats based on source maps. But, unlike
    source-map-explorer
    , it does that for a full page and includes all bundles:

Code duplicates

These tools help to find and remove duplicated code inside the bundles:

  • Bundle Buddy shows which bundles include which module. Use it to find duplicated code and fine-tune code splitting:

(Image credits:

duplicate-package-checker-webpack-plugin
)

Various tools

  • Webpack Analyse shows all modules present in the bundle – and relationships between them. Use it to understand why a specific suspicious module is bundled:

  • webpack-dashboard
    reports sizes of modules and warnings like duplicated files during development:

(Image credits:

webpack-dashboard
)

Other web performance lists

  • 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

Contribute

Contributions welcome! Read the contribution guidelines first.

License

CC0

To the extent possible under law, Ivan Akulov has waived all copyright and related or neighboring rights to this work.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.