Webpack:quot;“全部”;及;首字母“;optimization.splitChunks.chunks中的选项

Webpack:quot;“全部”;及;首字母“;optimization.splitChunks.chunks中的选项,webpack,webpack-4,Webpack,Webpack 4,我想在webpack中清楚地解释这两个选项之间的区别。我看过描述,但区别不清楚。引用描述: 将optimization.splitChunks.chunks选项设置为“所有”初始块将受到影响(即使是未动态导入的块)。这样,块甚至可以在入口点和按需加载之间共享 all表示将选择动态导入的模块和静态导入的模块进行优化初始表示仅选择静态导入的模块进行优化 引述自: 可能的值为all、async和initial。提供all功能特别强大,因为它意味着块甚至可以在异步块和非异步块之间共享 试图得到最简单的解

我想在webpack中清楚地解释这两个选项之间的区别。我看过描述,但区别不清楚。引用描述:

将optimization.splitChunks.chunks选项设置为“所有”初始块将受到影响(即使是未动态导入的块)。这样,块甚至可以在入口点和按需加载之间共享


all
表示将选择动态导入的模块和静态导入的模块进行优化<代码>初始表示仅选择静态导入的模块进行优化

引述自:

可能的值为all、async和initial。提供all功能特别强大,因为它意味着块甚至可以在异步块和非异步块之间共享


试图得到最简单的解释。这是将被传输和绑定的文件:

//app.js
import "my-statis-module";

if(some_condition_is_true){
  import ("my-dynamic-module")
}
console.log("My app is running")

现在看看不同的优化类型将如何处理它

异步(默认):

将创建两个文件

  • bundle.js(包括app.js+my statis模块)
  • chunk.js(仅包括我的动态模块)
  • 首字母:

    将创建三个文件

  • app.js(仅包括app.js)
  • bundle.js(仅包括我的静态模块)
  • chunk.js(仅包括我的动态模块)
  • 全部:

    将创建两个文件

  • app.js(仅包括app.js)
  • bundle.js(包括我的静态模块+我的动态模块)

  • 所有”的总尺寸最小。

    这是迄今为止我发现的最简单的解释。非常感谢。