如果您已经在我的WebPack列中读取了单个页面应用程序的配置，或者自己配置了单个页面应用程序，则应知道，对于单个页面应用程序，如果未配置，它最终会将JS包装在项目中JS JSDocument。
这有什么问题？
我们需要知道，如果我们使用React来编写项目，那么我们的项目将不可避免地依靠与React相关的文件。包装时，将与React相关的文件打包。
当这些文件与我们编写的JS结合使用时，包装结果的单个JS文件将非常大，从而影响加载速度并导致第一个屏幕空白。
我们还知道，与React相关的文件几乎不会更改。更改JS，如果我们可以在浏览器中放慢速度，我们可以减少文件的下载量并提高页面加载速度。
基于此，我们可以打包一些公开，不明显的JS文件以及项目业务中涉及并经常更改的JS文件吗？
此外，我们可以让单个页面仅加载此页面的JS文件吗？
该多页应用程序代码可以从单个页面应用程序传输。您猜测如何在Juejin.cn中获得WebPack+React。
我们运行代码的代码并获得以下结果：
从包装JS的音量来看，每个JS文件都应在React库的相关代码中打包。
让我们将React库的代码相关代码分开，然后将其转换为公共供应商。
这是生产环境的相关配置。我们在webpack.common.js中进行了修改如下
依赖项在此处指定为公共文件供应商，然后需要在入口文件中指定依赖项。
注意：供应商还可以自己指定文件，内容为数组表单。
我们在src/config中修改条目和插件如下：
之前，条目为{name：path}键值对，我们将其修改为
运行包装，我们会收到以下文件：
您可以看到我们已经成功提取了公共文件。
打开HTML文件，您可以在HTML文件中找到HTML文件中的公共JS和接口对应的JS。
单页应用程序的配置类似于多页面应用程序。添加供应商以修改相应的输入文件配置和HTMLWebPackPlugin。
它的缺点是显而易见的，只能包装公共文件。
如果我们需要打包多个公共文档并想单独打包？
包装的内容需要手动指定。
您可以通过引入模块自动确定公共内容吗？
优化。Splitchunks（Splitchunks）是WebPack 4的代码碎片特性，以重新设计和实现Redmonschunk-Plugin.it不仅比Commonschunkplugin函数更强大，而且更易于使用。
还原我们的代码，并在webpack.pro.js中编写以下代码：
运行，获取以下包装结果：
我们可以看到，在简单的配置之后，我们指定了“所有”，该“所有”将自动检测到所有块中的公共内容，将其包装到公共文件中，然后自动将其引入HTML文件中。无需它。我们的额外配置非常方便操作。它包装的模块也在相应的TXT文档中说明。
它根据什么检测公共内容？
以下内容来自官方文档https://v4.webpack.docschina.org/plugins/split-chunks-plugin/＃defaults。
块可以以三种形式配置
按需加载默认配置，即异步，它将提取异步加载的资源的公共文件（按需加载），并且入口文件的公共文件不会移动。
最初将提取条目文件的公共文件。
所有这些都将提取条目文件的公共文档和异步加载资源。
它包装公共文件以遵循以下条件：
默认配置如下：
其中，cachegroups是公共文件的单独规则。
例如，在默认配置中，以供应商开头的JS文件将提取在Node_modules中满足的条件，并且默认值用于多个参考模块。当然，如果我们不修改默认配置，则默认的形成是它的大小必须大于30 kb。
如果我们想尝试多个公共文档，则修改配置如下：
这样，只要公共文件超过1KB并被引用了两次以上，就会形成新的公共文件。
我们分别在第一页和第二页中介绍mybutton组件。
示例修改firstpage/index.jsx内容如下：
包装以下文件：
包装公共文件如下，因此我们成功包装了多个公共文件。
异步加载资源是指我们可以加载所有JS而无需一个时间加载。
我们可以使用导入来加载异步，WebPack支持本文。
我们可以编写以下代码：（代码请参阅本书：WebPack实际战斗：条目，高级和调整）
制作单个页面应用程序时，我们可以通过判断路由的更改来加载相应页面所需的组件，从而尽可能最大程度地减少每个接口加载的文件。
接下来，让我们使用单个页面应用程序实践。接下来使用的代码注定要保存前端。它应该是WebPack（三）-CN中的简单配置单页应用程序。
同样，我们在webpack.pro.js中配置如下：
配置了React单页应用程序按需加载，我们可以介绍外部库进行实现。
修改src/app.jsx代码如下：如下：
通过运行，我们打开调试器，并发现只有在单击相应的链接和顶部路由更改时，我们将加载与接口相对应的JS。
我们运行并获得以下方面。可以看出，目前非常详细。
最后，代码碎片的内容基本结束了。如果您对您有帮助，请记住给我一个赞美?
原始：https：//juejin.cn/post/70948657779097636