webpack

What is the purpose of runtimeChunk?


What is the purpose of optimization.runtimeChunk? What does setting it to single/multiple do?


Solution

  • Let's say I have 3 entrypoints:

    and I set the optimization.runtimeChunk = 'multiple'. This will create 3 entrypoints for each runtime. Compare with optimization.runtimeChunk = 'single' which only has a single runtime.

    print and weirdRuntimeChunk do not have code inside. In index.js, I console.log(this) which will run 3 times because we have 3 runtimechunks generated.

    Result:

    enter image description here

    Also, this is warned on the webpack site:

    Imported modules are initialized for each runtime chunk separately, so if you include multiple entry points on a page, beware of this behavior. You will probably want to set it to single or use another configuration that allows you to only have one runtime instance.