随着单页面应用的流行，前端工程变得越来越复杂。为了更好地管理这些复杂的 web 应用程序，我们需要使用像 Webpack 这样的构建工具来编译和打包我们的代码。Webapck4 是目前最新版本的 Webpack，它增加了很多新特性和改进，其中最重要的是对代码分离的支持。在本文中，我们将讨论如何使用 Webpack4 实现代码分离，以及为什么这很重要。
代码分离是什么？
代码分离是将应用程序中的代码分成更小的块，以便更好地管理和加速加载时间。在没有代码分离的情况下，我们的 JavaScript 和 CSS 代码通常被打包成一个大文件，这意味着所有的代码都必须在用户加载我们的应用程序时一次性下载。随着应用程序的规模增长，文件大小也会呈指数级增长，导致加载时间过长。
代码分离可以解决这个问题，因为它让我们将代码分成更小的块，这些块可以单独加载和缓存。这使得我们的应用程序更快，因为用户只需要下载他们首次访问的页面所需的代码，而不是整个应用程序。
Webpack4 和代码分离
Webpack4 使得代码分离变得更容易，它提供了两种主要的方式来实现代码分离：通过入口点和动态导入。
通过入口点实现代码分离
入口点是 webpack 配置文件中 entry 属性指定的 JavaScript 文件。默认情况下，Webpack 会将所有依赖打包到一个文件中，如下面的示例所示：
-- -------------------- ---- -------
-- -----------------
-------------- - -
------ -
----- ----------------
--
------- -
--------- ------------
----- --------- - -------
-
--在上面的示例中，Webpack 将所有依赖打包成一个名为 bundle.js 的文件，其中包括 main.js 和它所依赖的所有文件。这不是代码分离。
Webpack4 提供了一个优美的解决方案，使得我们可以轻松地将我们的代码分离成多个块。为此，我们需要在 entry 属性中使用数组或对象来指定多个入口点。这样，Webpack 将会为每个入口点生成一个独立的块，如下面的示例所示：
-- -------------------- ---- -------
-- -----------------
-------------- - -
------ -
----- -----------------
------- -----------------
--
------- -
--------- ------------
----- --------- - -------
-
--在上面的示例中，我们在 entry 属性中指定了两个入口点：main 和 vendor。Webpack 会为每个入口点生成一个独立的块。这样，我们就能将我们的代码分成两个块：main.js 和 vendor.js。
通过动态导入实现代码分离
动态导入是指根据条件进行加载，而不是一次性加载所有代码。Webpack4 支持动态导入，它允许我们根据需要异步加载代码块。这样可以极大地减少初始页面的加载时间。
使用动态导入非常简单。我们可以使用 ES6 的 import() 语法，可以在运行时异步地加载模块。例如：
-- -------------------- ---- -------
-------- -------------- -
------ --------- ----------------- -------- -- ---------------- -- -
--- ------- - ------------------------------
----------------- - ---------------- ----------- - ---
------ --------
-------------- -- --- ----- -------- ----- ------- --- ------------
-
----------------------------- -- -
-------------------------------------
---在上面的示例中，我们使用 import() 异步地加载了 lodash 模块，减少了初始加载时间。与此同时，我们使用了 webpackChunkName 注释来指定代码块的名称，这样 Webpack 将为每个块创建一个单独的文件。
总结
Webpack4 支持代码分离，允许我们将应用程序的代码分成更小的块，以便更好地管理和提高加载时间。我们可以通过入口点和动态导入实现代码分离。
在实践中，我们应该尽可能使用动态导入，因为它可以大大减少初始加载时间。同时，我们还应该根据应用程序的规模和复杂度来选择适当的代码分离方式。在需要分离成多个块的情况下，我们可以通过入口点来实现代码分离。
最后，我希望这篇文章能够帮助你更好地了解 Webpack4 和代码分离的概念，并为你提供一些指导，帮助你更好地处理现代 web 应用程序的复杂性。
参考文献：
示例代码：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649bd9c448841e989489bcd5