Webpack
webpack 随附一个名为 SplitChunksPlugin 的插件，可让你
配置捆绑器拆分 JavaScript 文件的方式。webpack 识别
动态 import() 和静态 import 语句。行为
SplitChunksPlugin 可以通过指定 chunks 选项在其
配置：
chunks: async 是默认值，表示动态 import() 调用。chunks: initial 是指静态 import 调用。chunks: all 同时涵盖了动态 import() 和静态导入，让您能够
用于在 async 和 initial 导入之间共享分块。
默认情况下，每当 webpack 遇到动态 import() 语句时。它
会为该模块创建一个单独的分块：
/* main.js */
// An application-specific chunk required during the initial page load:
import myFunction from './my-function.js';
myFunction('Hello world!');
// If a specific condition is met, a separate chunk is downloaded on demand,
// rather than being bundled with the initial chunk:
if (condition) {
// Assumes top-level await is available. More info:
// https://v8.dev/features/top-level-await
await import('/form-validation.js');
}
上述代码段的默认 webpack 配置会导致出现两个
拆分数据块：
main.js 分块（Webpack 将其归类为 initial 分块），
包含 main.js 和 ./my-function.js 模块。async 分块，仅包含 form-validation.js（包含一个
资源名称中的文件哈希（如果已配置）。此分块仅会下载
如果 condition 为 truthy。
采用此配置时，您可以将 form-validation.js 分块延迟到
还是需要它的这样就可以减少脚本
评估时间。脚本下载和评估
在满足指定条件时都会发生 form-validation.js 分块，即在
在这种情况下，系统会下载动态导入的模块。例如
条件是只为特定浏览器下载 polyfill，或者如
前面的示例 - 导入的模块是用户互动所必需的。
另一方面，更改 SplitChunksPlugin 配置以指定
chunks: initial 可确保仅在初始分块上拆分代码。这些是
数据块，例如静态导入的块，或 webpack 的 entry 中列出的数据块
属性。看一下前面的示例，生成的分块将是
form-validation.js 和 main.js 组合到单个脚本文件中，
这可能导致初始网页加载性能降低。
SplitChunksPlugin的选项也可以配置为
脚本转换为多个较小的脚本，例如使用 maxSize 选项
指示 Webpack 在数据块超出
由 maxSize 指定。将大型脚本文件拆分为多个较小的文件
提高负载响应能力，例如在某些情况下， CPU 密集型脚本评估
工作分成数个小任务，这些小任务不太可能阻碍主要
延长时间
此外，生成更大的 JavaScript 文件也意味着
更容易遭受缓存失效。例如，如果您提供
包含框架和第一方应用代码的大型脚本，
只更新框架而不更新
捆绑的资源
另一方面，脚本文件越小，返回
从缓存中检索资源，从而可以提高网页在
重复访问。但是，与较大文件相比，较小的文件从压缩中受益较少
并且可能会增加网页加载时的网络往返时间
浏览器缓存。必须注意在缓存之间取得平衡
压缩有效性及脚本评估时间。
注意：如果您停用
SplitChunksPlugin
方法是在应用的 Webpack 中指定
splitChunks: false
配置，则
./my-function.js 会捆绑到
同时 main.js 和
form-validation.js。
webpack 演示
注意：由于此演示使用了捆绑器，因此 Glitch 演示
无法嵌入。如需运行该代码库，请将以下 GitHub 代码库克隆到
然后按照代码库的
README。
webpack SplitChunksPlugin 演示。
知识测验
执行代码时使用哪种类型的 import 语句
拆分？
哪种类型的 import 语句必须位于顶部
而又不在其他位置？
在 webpack 中使用 SplitChunksPlugin 时，
async 数据块与
initial 块吗？
系统会使用动态 import() 加载 async 个分块
和initial区块使用静态数据块进行加载
import。
正确！
使用静态 import 加载 async 分块
和initial分块是使用动态方法加载的
import()。
请重试。
下一篇：延迟加载图片和
