在前端开发中，我们通常会使用 webpack 来构建我们的项目。而在一个大型项目中，代码量通常会很大，为了优化我们的项目，我们需要对代码进行分割，这样可以提高页面加载速度，减少不必要的资源浪费。在 webpack 中，我们可以使用代码分割的方式来实现这个目标。
什么是代码分割？
代码分割是将一个大的代码文件分割成多个小的代码文件，使得每个小的代码文件可以独立的被加载。这样可以让我们的页面加载速度更快，同时也可以减少不必要的资源浪费。
webpack 中的代码分割
webpack 中的代码分割可以通过以下两种方式来实现：
- 预编译时分割代码
- 运行时分割代码
预编译时分割代码
预编译时分割代码是指在编译时就将代码分割成多个小的代码文件。这种方式可以通过 webpack 的 splitChunks 配置来实现。
-------------- - -
-----
------------- -
------------ -
------- -----
-
-
--上面的配置将会把所有的公共代码提取到一个单独的文件中。除此之外，如果你的项目有多个入口，你还可以通过配置 cacheGroups 来对不同的入口进行代码分割。
-------------- - -
-----
------------- -
------------ -
------------ -
-------- -
----- ----------
------- ----------
---------- -
--
------- -
----- ---------------
----- ---------
------- -----
-
-
-
-
--上面的配置将会把所有来自 node_modules 的代码提取到一个单独的文件中，并且把所有的公共代码提取到一个名为 commons 的文件中。
运行时分割代码
运行时分割代码是指在运行时根据需要动态的加载代码。这种方式可以通过 webpack 的 import() 函数来实现。
--------------------------------- -- - -- --- ---
上面的代码会在需要的时候动态的加载 module.js 文件，并且执行 module 中的内容。
总结
代码分割是优化前端项目的一个非常重要的方式。在 webpack 中，我们可以通过预编译时分割代码和运行时分割代码来实现代码分割的目标。对于一个大型的项目，使用代码分割可以提高页面加载速度，减少不必要的资源浪费，是一个非常值得推荐的优化方式。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/663ad1a5d3423812e48df037