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.jsconst SizeLimiterPlugin = ; moduleexports = ... plugins: onlyWarn: true entries: first: 10000 second: 192 * 1000 { if chunkisInitial return 30 * 1000; else return 10 * 1000; }
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 anentry
composes all the files required to load that entry point. So if you useCommonsChunkPlugin
, 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.
- a
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 thechunk.files
to identify them, or any other property in the Chunk class. Alsochunk.isInitial()
tells you if is a entry chunk.
- a
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.