Webpack5 是一个流行的 JavaScript 模块打包器，它能够有效地按需加载项目的各个模块。代码分割是 Webpack5 中一个非常重要的特性，可以将代码拆分为更小的块，以便在需要时按需加载，提高了应用程序的性能和可维护性。本文将会介绍三种 Webpack5 实现代码分割的方式，帮助你更好地使用它来构建应用程序。
1. 预设代码分割
Webpack5 具有内置的代码分割功能，可以通过一些预设选项来控制代码拆分。这些选项包括：optimization.splitChunks.chunks，optimization.splitChunks.cacheGroups，optimization.runtimeChunk 等。下面是一个例子：
-- -------------------- ---- ------- -- ----------------- -------------- - - -- --- ------ ------------- - ------------ - ------- ------ -- ------ ------------ - ------- - ----- ------------------------- ----- --------- -- ------------------- ------- ------ -- -- -- ------------- - ----- ---------- -- -- --展开代码
上面的例子定义了两个预设规则：将所有来自 node_modules 中的代码提取到 vendor.js 中，将所有的运行时代码提取到 runtime.js 中。使用预设规则需要注意以下几点：
chunks指定要提取的代码块类型，可选设置有all，async，initial，function等；cacheGroups可以定义多个组，每个组可以有一个test表达式用于匹配需要提取的模块，一个可选的name字段可以指定输出的文件名，以及一个chunks字段指定分割哪些代码块；runtimeChunk用于提取运行时的代码到单独的文件中。这个选项需要启用optimization.runtime选项。
2. 动态导入代码分割
动态导入是一种将代码拆分为更小块的技术，它能够让你在需要时按需加载代码。动态导入可使用 Webpack5 的 import() 语法，在运行时动态加载模块。这样可以将页面应用程序的各个部分拆分成独立的、更小的块，以便更快地加载和显示应用程序的初期视图。以下是一个例子：
// index.js async function getComponent() { const module = await import('./component.js'); const component = new module.default(); document.body.appendChild(component.getElement()); } getComponent();
上面的例子中，import() 函数会在运行时动态加载 component.js 模块，然后通过 default 属性获取导出的默认模块。
在 Webpack5 中，可以通过 optimization.splitChunks.minSize 参数来控制文件的最小体积，当生成的块大小大于指定的最小值时，将生成一个新的代码块。
3. 使用第三方库
Webpack5 还提供了一些第三方库，可以更方便地实现代码分割。其中 SplitChunksPlugin 和 BundleAnalyzerPlugin 就是非常受欢迎的两个库之一。
SplitChunksPlugin
SplitChunksPlugin 是一个优化插件，用于提取公共代码，将它们放入独立的块中，以便更好地利用浏览器的缓存机制。以下是一个例子：
-- -------------------- ---- ------- -- ----------------- ----- ----------------- - -------------------------------------------------- -------------- - - -- --- ------ -------- - --- ------------------- -------- ------ -------- -- ---------- -- ----------------- -- ------------------- -- ----------------------- ---- ------------ - ------- - ----- ------------------------- ----- --------- ------- ------ -- -- --- -- --展开代码
在上面的配置中，我们使用了 SplitChunksPlugin 来提取来自 node_modules 中的代码到 vendor 块中。
BundleAnalyzerPlugin
BundleAnalyzerPlugin 是一个可视化分析工具，可以展示你的包文件的内容和文件大小的图表，帮助你找到实现代码分割的瓶颈，优化打包体积。以下是一个例子：
-- -------------------- ---- ------- -- ----------------- ----- - -------------------- - - ----------------------------------- -------------- - - -- --- ------ -------- - --- ---------------------- ------------- --------- ------------------ ----- --- -- --展开代码
上面的例子中，我们使用了 BundleAnalyzerPlugin 来生成一个带有图表的页面，用于分析包的内容和大小。
总结
Webpack5 是一个非常优秀的打包器，它提供了多种方法实现代码分割，从而更好地管理和优化代码。在本文中，我们介绍了三种实现代码分割的方式：预设代码分割、动态导入代码分割、第三方库。每种方式都有其特点和局限性，需要根据具体的业务需求进行权衡选择。希望这篇文章能够帮助你更好地使用 Webpack5。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f2fe1bf6b2d6eab3c82d6c
