Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Please explain Webpack LimitChunkCountPlugin, MinChunkSizePlugin, and AggressiveMergingPlugin

Tags:

I'm finding the option descriptions for Webpack's LimitChunkCountPlugin, MinChunkSizePlugin, and AggressiveMergingPlugin to be a bit confusing. Some are self-explanatory but others are very vague.

In LimitChunkCountPlugin I'm presented with 3 options:

options.maxChunks (number) max number of chunks

options.chunkOverhead (number) an additional overhead for each chunk in bytes (default 10000, to reflect request delay)

options.entryChunkMultiplicator (number) a multiplicator for entry chunks (default 10, entry chunks are merged 10 times less likely)

  • So maxChunks is pretty self-explanatory
  • I have no idea what chunkOverhead is as it sounds like it adds 10,000 empty bytes to the chunk to reflect a delay ??? Which makes no sense
  • entryChunkMultiplicator is not as vague but still pretty vague. I'm guessing is some abstract number where the higher it is the less likely the entry chunk (Theres only 1 entry chunk in my case) will be merged into another chunk

In MinChunkSizePlugin I'm presented with one option

Merge small chunks that are lower than this min size (in chars). Size is approximated.

options.minChunkSize (number) chunks smaller than this number will be merged

So how big is a char, an ascii char is 1-byte but a utf-8 and utf-16 can be up to 2 or more bytes (If I'm correct). I'm guessing we're going with 1-char to 1-byte in which case 1024 for example would be 1kb. Also What values do other people use?


For the AggressiveMergingPlugin

options.minSizeReduce A factor which defines the minimal required size reduction for chunk merging. Defaults to 1.5 which means that the total size need to be reduce by 50% for chunk merging.

options.moveToParents When set, modules that are not in both merged chunks are moved to all parents of the chunk. Defaults to false.

options.entryChunkMultiplicator When options.moveToParents is set, moving to an entry chunk is more expensive. Defaults to 10, which means moving to an entry chunk is ten times more expensive than moving to an normal chunk.

  • minSizeReduce is pretty simple, if the chunk can be shrunk down by 50% or more merge it
  • moveToParents this is also pretty confusing, its set to false by default which throws up red flags that maybe I shouldn't touch it, but it sounds like it duplicates and moves all un-shared modules to all parents. If so why would anyone use that option.
  • entryChunkMultiplicator this is pretty abstract and vague, it sounds like, when modules are moved to an entry chunk it becmes 10 times slower to access which can't be right. Why would I want to make it slower?

If anyone can clear this up for me thanks very much in advance.

like image 410
黒い雪 Avatar asked May 05 '16 04:05

黒い雪


1 Answers

LimitChunkCountPlugin

While writing your code, you may have already added many code split points to load stuff on demand. After compiling you might notice that some chunks are too small - creating larger HTTP overhead. Luckily, this plugin can post-process your chunks by merging them.

MinChunkSizePlugin

Keep chunk size above the specified limit by merging chunks that are smaller than the minChunkSize.

AggressiveMergingPlugin

Is actually absent in latest API which you probably use. Maybe this?

like image 105
Piterden Avatar answered Sep 22 '22 20:09

Piterden