webpack-size-limiter-plugin v1.1.1

SizeLimiterPlugin

Webpack Plugin to check & limit bundle size.

It's heavily inspired in the default SizeLimitsPlugin but provides more flexibility in the rules definition. You can define different maxSizes depending if it's an entry point or a chunk, or dependig the entry name. Which can be useful if you have entry points that are known to be more heavy that others, but are expected to do so.

Usage

Add the plugin to your webpack.config.js

// webpack.config.js
const SizeLimiterPlugin = require('webpack-size-limiter-plugin');

module.exports = {
  ...
  plugins: [
    new SizeLimiterPlugin({
      onlyWarn: true,
      entries: {
        first: 10000,
        second: 19.2 * 1000
      },
      chunks: chunk => {
        if (chunk.isInitial) return 30 * 1000;
        else return 10 * 1000;
      }
    }),
    new webpack.NoEmitOnErrorsPlugin()
  ]
}

Options:

• onlyWarn: Show a warning instead of an error. false by default
• entries: Defines max size for webpack entries. It's importan to note that an entry composes all the files required to load that entry point. So if you use CommonsChunkPlugin, then the file it generates is also part of the entry. It can be:
  • a number that defines max size for any entry,
  • an object that maps entry name to maxSize. The special key _ acts as a default value
  • a function (entryName: string) => number that returns maxSize for an entry.
• chunks: Defines max size for webpack chunks. Chunks are all the files generated. This include the entry files and also the files generated by dynamic imports. It can be
  • a number that defines max size for any chunk
  • an object that maps chunk name to maxSize. The special key _ acts as a default value
  • a function (chunkName: string, chunk: Chunk) => number that returns maxSize for an chunk. Be aware that unless you define them, chunks that are not entries have no name. You can use the chunk.files to identify them, or any other property in the Chunk class. Also chunk.isInitial() tells you if is a entry chunk.

Important: The plugin won't stop webpack emit of bundle files, it will just report errors or warnings. If you want to stop emiting on error use the NoEmitOnErrorsPlugin for that.

Example:

Check the example included in the module.