WebPack 是一个优秀的前端构建工具，它可以将多个 JavaScript 文件打包成一个文件，从而减少 HTTP 请求次数，加快页面加载速度。但是对于多页面应用，我们需要对 WebPack 进行一些优化，以实现更快的页面加载速度。
在本文中，我们将介绍 WebPack 如何进行代码分割和公共模块提取，以优化多页面应用的加载速度。
代码分割
当我们打包多个 JavaScript 文件时，我们可以将它们分成多个文件，从而减少每个文件的大小，加快页面加载速度。这个过程被称为代码分割。
Webpack 通过 import() 语法来实现代码分割。import() 是一个异步加载模块的语法，它可以将模块分割成更小的块，这些块可以按需加载。
我们可以使用 import() 语法来按需加载模块。在下面的例子中，我们将一个模块分割成两个文件：
import('./module1.js').then(module1 => {
// 使用 module1
});
import('./module2.js').then(module2 => {
// 使用 module2
});在上面的代码中，module1.js 和 module2.js 将被分割成两个文件，并在需要的时候按需加载。这样可以减少初始加载时间，提高页面加载速度。
在 WebPack 中，我们可以使用 optimization.splitChunks 配置来进行代码分割。下面是一个示例配置：
-- -------------------- ---- -------
-------------- - -
-- ---
------------- -
------------ -
------- ------
------------ -
------- -
----- -------------------------
----- ----------
------- ------
--
--
--
--
--在上面的配置中，optimization.splitChunks 配置用于代码分割。chunks: 'all' 表示将所有的模块都分割成多个文件。cacheGroups 配置用于定义分割的规则。在上面的例子中，我们定义了一个名为 vendor 的缓存组，它用于将所有来自 node_modules 目录的模块打包进一个名为 vendors 的文件中。
公共模块提取
在多个页面中，可能会存在一些公共模块，例如 jQuery、React 等。这些公共模块可能会被多次加载，浪费网络资源。为了避免这种情况，我们可以将这些公共模块提取出来，打包成一个单独的文件，供多个页面共享。
Webpack 通过 optimization 配置来进行公共模块提取。下面是一个示例配置：
-- -------------------- ---- -------
-------------- - -
-- ---
------------- -
------------ -
------- ------
------------ -
------- -
----- -------------------------
----- ----------
------- ------
--
--
--
------------- -
----- -----------
--
--
--在上面的配置中，optimization.runtimeChunk 配置用于提取运行时代码。name: 'manifest' 表示将运行时代码打包进一个名为 manifest 的文件中。
在多页面应用中，我们可以使用 HtmlWebpackPlugin 插件来自动注入打包后的文件。下面是一个示例配置：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
-- ---
-------- -
--- -------------------
--------- -------------
--------- -----------------
------- -------- ---------- ------------
---
--- -------------------
--------- -------------
--------- -----------------
------- --------- ---------- ------------
---
--
--在上面的配置中，我们通过 HtmlWebpackPlugin 插件来自动注入打包后的文件。chunks 配置用于指定每个 HTML 页面需要加载的模块。在上面的例子中，index.html 需要加载 main、vendors 和 manifest 三个模块，about.html 需要加载 about、vendors 和 manifest 三个模块。
结语
通过代码分割和公共模块提取，我们可以优化多页面应用的加载速度，提高用户体验。在实际开发中，我们应该根据项目的实际情况来进行优化，避免不必要的性能损失。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d3e52aa941bf7134764a8f
