在现代 Web 应用程序中，单页应用程序（SPA）已经成为了一个常见的开发方式，然而，由于 SPA 涉及到的资源较多，因此在加载速度方面仍然有不少挑战。幸运的是，Webpack 提供了一些功能，可以帮助我们优化单页应用程序的加载速度。
代码分割
令人兴奋的是，Webpack 支持代码分割，这意味着以前在代码中引用的所有模块都会打包成一个（或多个） JS 文件。这在单页应用程序中是有问题的，因为一个页面可能包含多个模块，这些模块不同时使用，因此优化策略应该是将这些模块拆分成更小的块，并在需要的时候按需加载它们。
动态导入
Webpack 支持动态导入，这意味着我们可以在应用程序运行时动态加载这些块。Webpack 4 甚至提供了内置的 import() 函数，可以更方便地执行动态导入。
------------------------------------- -- - -- ---- ---
Webpack 将这个模块打包成一个单独的文件，并在需要时按需加载它。
预加载
如果您知道用户接下来可能会访问哪一页，您可以使用预加载来提前加载该页面所需的模块。Webpack 提供了一个 import() 的别名 preload，可以使用该别名来执行模块的预加载。
----- ------------- --------------------- ------------
预取
与预加载不同的是，预取不会在当前页面加载完成后立即执行，而是在浏览器空闲时获取资源。您可以将所需的模块添加到一个 link 标记中，使用 rel 属性设置为 prefetch。
----- -------------- ----------------------
预取在当前页面加载完成后开始执行，当页面进入到下一个阶段，模块将预加载并缓存，因此在下一次需要访问模块时，它将非常快。
利用浏览器缓存
优化 Web 应用程序的一个简单方法就是将一些资源缓存，这样当用户再次访问该站点时，浏览器将不必重新下载大多数文件。Webpack 具有优化性能的优点，可以帮助您将文件缓存到用户的浏览器中。
output.filename 和 output.chunkFilename
在 Webpack 中，您可以使用 output.filename 和 output.chunkFilename 设置文件名。这些选项确定输出文件的名称。output.filename 是用于输出入口文件的文件名。output.chunkFilename 是用于非入口文件的文件名，例如在动态导入中使用的块。
我们可以在这些选项中使用特殊字符，如 [name]，将文件名占位符替换为它们所依赖的模块的名称。这意味着当我们修改一个入口文件时，Webpack 将生成一个新的输出文件名，因此浏览器可以下载并缓存该新文件。
------- - ----- ----------------------- -------- --------- ---------------------------- -------------- --------------------------------- -
SplitChunksPlugin
Webpack 还提供了一个用于优化块的插件：SplitChunksPlugin。该插件分析共享块，将它们从原来的输出块中提取出来，并将其合并为新的块。这有利于缓存，因为可以将经常使用的代码放在单独的文件中，而不是与其他模块混合在一起。
------------- -
------------ -
------- -----
-
-结论
Webpack 具有许多工具，可帮助我们优化 Web 应用程序的性能，从而提高单页应用程序的加载速度。本文讨论了一些方法，例如代码分割、动态导入、预加载和预取、利用浏览器缓存等，希望能够帮助您更好地优化和构建您的应用程序。
示例代码
以下是具有代码分割和 cache 等功能的 Webpack 配置示例：
----- ---- - ----------------
----- ----------------- - -------------------------------
----- - ------------------ - - --------------------------------
-------------- - -
------ -
------ -----------------
--
------- -
----- ----------------------- --------
--------- ----------------------------
-------------- ----------------------------------
--
------------- -
------------- ---------
------------ -
------- ------
--
--
-------- -
--- ---------------------
--- -------------------
--------- -------------------
------- --------- -----------------------
---
--
--来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6728c7482e7021665e21aa7a