随着 Web 应用的复杂逐渐增加，一个页面可能包含多个 JavaScript 模块。所有这些模块都必须一起加载，这可能带来一些问题，例如页面加载速度变慢、性能下降和代码维护性降低等。Webpack 提供了多种方式来优化应用程序性能，其中之一便是代码分离。
什么是代码分离
将应用程序代码拆分成较小的块被称为代码分离。这有助于最小化初始加载时间，因为只加载应用程序所需的代码。当用户浏览网站时，只有在需要时才会加载其他代码块。这可以减少网络负担并提高整个应用程序的性能。
代码分离的技术
Webpack 支持三种代码分离技术：
入口起点：使用
entry配置手动分离代码。防止重复：使用
SplitChunksPlugin去重和拆分 chunk。动态导入：通过模块的内联函数调用来分离代码。
入口起点
入口起点是最简单的代码分离方式。通过在配置文件中指定多个入口，可以将应用程序分为多个 chunk。这对于拆分应用程序和第三方依赖库是非常有用的。下面是一个简单的配置文件示例：
-- -------------------- ---- -------
-------------- - -
------ -
---- ---------------
------- -----------------
--
------- -
--------- ------------
----- ----------------------- -------
-
--在这个例子中，我们要生成两个单独的 JavaScript 文件：app.js 和 vendor.js。这可以通过在 HTML 页面中包含这两个脚本来实现。
防止重复
防止重复是 Webpack 的另一个有用功能。它通过 SplitChunksPlugin 插件自动分析模块之间的共享依赖并将它们拆分成一个单独的 chunk。这可以缩短加载时间并减少浏览器缓存中的存储空间。以下是在配置文件中启用此功能的示例：
module.exports = {
// ...
optimization: {
splitChunks: {
chunks: 'all'
}
}
};这将使用默认配置拆分所有类型的 chunk：all 将应用于同步和异步 chunk。
动态导入
动态导入是一种将代码拆分成较小块的方法，这些块将在运行时根据需要加载。这可以通过 import() 函数、require.ensure() 函数或 async/await 语法来实现。
下面是使用 import() 函数进行代码分离的示例：
-- -------------------- ---- -------
-------- -------------- -
------ --------- ----------------- -------- -- ----------------- -------- - -- -- -
--- ------- - ------------------------------
----------------- - ---------------- ----------- - ---
------ --------
-------------- -- --- ----- -------- ----- ------- --- ------------
-
----------------------------- -- -
-------------------------------------
---在这个例子中，我们使用 import() 函数加载 Lodash 库。我们使用 webpackChunkName 注释告诉 Webpack 分割出一个单独的块。当我们调用 getComponent() 函数时，它将返回一个 Promise 对象，这个 Promise 对象将负责加载 Lodash 库。当 Promise 被解决后，我们可以将它的返回值添加到页面上。
总结
代码分离是 Webpack 的一个重要功能，它可以大大加速初始加载时间，提高应用程序性能。Webpack 提供了多种代码分离技术，包括入口起点、防止重复和动态导入。选择适合你的应用程序的代码分离技术，并在你的应用程序中进行优化，以提高性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6466e5c1968c7c53b074f591