Webpack：optimization.splitChunks.chunks的all与initial选项有何差异？

Let me break down the key differences between these two options clearly—since the official docs can feel a bit abstract when you're trying to wrap your head around them.

First, what does initial do? #

• When you set chunks: "initial", Webpack only applies code splitting rules to non-dynamically imported chunks (the chunks that load when your app starts up, like your entry points).
• Dynamically imported chunks (loaded via import() syntax) are excluded from this optimization. Any duplicate modules between initial chunks and dynamic chunks won't be shared—they'll be bundled separately.

Example for initial: #

Suppose you have two entry files:

• entry1.js imports lodash and dynamically loads ./dynamic-module.js (which also imports lodash)
• entry2.js imports lodash

With chunks: "initial":

• Webpack will extract lodash from entry1.js and entry2.js into a shared vendors~entry1~entry2.js chunk.
• But the lodash inside ./dynamic-module.js will stay bundled with that dynamic chunk—no sharing with the initial shared chunk. You end up with two copies of lodash in your build.

Now, what does all do? #

• When you set chunks: "all", Webpack applies code splitting rules to every chunk in your project—both initial entry chunks and dynamically imported chunks.
• This is where the docs quote comes into play:

将optimization.splitChunks.chunks选项设置为"all"时，初始chunk（即使是非动态导入的chunk）也会受其影响，这样chunk甚至可以在入口点和按需加载之间共享。

• In short: all blurs the line between initial and dynamic chunks, letting them share common modules. Webpack will extract duplicate modules into a single shared chunk that can be used by both initial and dynamic code paths.

Example for all: #

Using the same setup as above:

• Webpack will extract all instances of lodash (from entry1.js, entry2.js, and ./dynamic-module.js) into a single shared chunk (like vendors~entry1~entry2~dynamic-module.js).
• Now, whether the user loads the initial app or triggers the dynamic import, they'll reuse the same lodash chunk—no duplicate code, smaller total bundle size, and better caching.

Quick Summary of Differences #

• initial: Optimizes only initial chunks; dynamic chunks don't share modules with initial chunks, leading to potential duplicate code.
• all: Optimizes all chunk types; maximizes module sharing between initial and dynamic paths, reducing overall bundle size and improving cache efficiency.

内容的提问来源于stack exchange，提问作者quantdaddy