代码放在git仓库中

Webpack 4给我们带来了一些变化。包括更快的打包速度，SplitChunksPlugin插件被引入来代替CommonsChunksPlugin插件(在以前的版本中)。在本文中，您将学习如何划分输出代码来提高我们应用程序的性能。

SplitChunks插件(webpack 4.x之前使用的CommonsChunkPlugin)允许我们将公共依赖项提取到现有的EntryChunks或全新的代码块中。

代码划分的思想

首先要明白：webpack中的代码分段到底是什么？它允许您将一个文件分成多个文件。如果使用得当，它可以大大提高应用程序的性能。原因是基于浏览器缓存你的代码的事实。每次您更改文件时，访问您网站的人都会再次下载它。然而，依赖性很少改变。如果您将(这些依赖项)分离到单独的文件中，访问者将不必多次下载它们。

使用webpack生成一个或多个包含源代码最终版本的“包”。(在概念上，我们把它们看作)它们是由(一个接一个的)组块组成的。

首先，webpack总共提供了三种实现代码拆分的方法，如下所示：

条目配置：条目使用多个条目文件；提取公共代码：使用SplitChunks提取公共代码；动态加载：动态加载一些代码。让我们只讨论使用SplitChunks来提取公共代码。

分割块配置

在src目录中创建三个文件pageA.js、pageB.js和pageC.js。有关代码细节，请参见文章开头的git warehouse。

//src/PageA . jsvar react=require(' react ')；var react DOM=required(' react-DOM ')；var utility1=require('./utils/utility 1’)；var utility2=require('./utils/utility 2’)；new Vue()；module.exports=' pageA//src/page b . jsvar react=require(' react ')；var react DOM=required(' react-DOM ')；var utility2=require('./utils/utility 2’)；var utility3=require('./utils/utility 3’)；module.exports=' pageB//src/pagec . jsvar react=require(' react ')；var react DOM=required(' react-DOM ')；var utility2=require('./utils/utility 2’)；var utility3=require('./utils/utility 3’)；module.exports=' pageC导入文件导出文件

条目： { page a : }。/src/pagea '，//参考utility 1 . js utility 2 . js page b : '。/src/pageb '，//参考utility 2 . js utility 3 . js page c : '。/src/pagec '，//参考utility2.jsutility3.js}，output 3360 { path : path . join(_ dirname，' dist ')，filename3360' [name]。[hash:8] .bundle.js'}，并配置优化

首先，我们配置优化如下：

优化： {分割组块： {组块：' all '，}，执行npm运行构建打包命令后检查dist目录

可以发现，除了三页文件，还有一个厂商~ pageA ~ pageB ~ pageC。[hash] .bundle.js文件(该文件保存Pagea、Pageb、Pagec和node_modules共享的大于30KB的文件)。事实上，这完全取决于默认情况下配置中固有的带有缓存组的配置项：

splitChunks: { chunks: ' all '、cache group s 3360 { vendors : { test :/[ /]node_modules[ /]/、//匹配node _ modules目录中的文件优先级： -10 //优先级配置项}、default3360 {minchunks3360 2、优先级：-20、//优先级配置项reuseExistingChunk: true } }默认情况下，节点中的模块您也可以通过优先级设置优先级。

参数描述如下：

组块：指示从哪些组块中提取代码。除了三个可选的字符串值initial、async和all之外，还可以通过函数过滤所需的块；MinSize:表示压缩前提取文件的最小大小，默认值为30000；MaxSize:表示压缩前提取文件的最大大小，默认值为0，表示不限制最大大小；MinChunks:表示引用次数，默认值为1；在上面的配置中，commons中的minChunks为2，这意味着被多次引用的代码被提取到commons中。值得注意的是，如果不修改minSize属性，并且公共代码(假设utilities.js)的大小小于30KB，则不会将其划分为单个文件。在实际情况下，这是合理的，因为(比如分段)并不能真正提高性能，反而会让浏览器再次请求utilities.js，而这个utilities.js又那么小(不经济)。

MaxAsyncRequests:按需(异步)加载的最大数量，默认值为5；MaxInitialRequests:初始化加载的最大次数，默认为3；AutomaticNameDelimiter:自动生成的提取文件名称的分隔符，默认值为~；名称：提取文件的名称；默认值为true，这意味着文件名是自动生成的；缓存组3360缓存组。(这是配置的关键。)缓存组将继承splitChunks的配置，但test、priorty和reuseExistingChunk只能用于配置缓存组。CacheGroups是一个对象，可以根据上面描述的键值对进行配置，该值代表相应的选项。此外，上面列出的所有选项都可以在缓存组中使用：chunks、minsize、minchunks、maxasyncrequests、maxinitialrequests、name。可以通过optimization . split chucks . cachegroups . default : false禁用默认缓存组。默认缓存组的优先级为负，因此所有自定义缓存组都可以具有比它更高的优先级(优先级更高的缓存组可以先打包选定的模块)(默认自定义缓存组优先级为0)

现在我们再来看看三个js文件pageA、pageB和pageC。这三个文件中都引入了utility2.js文件，但是这个文件的大小明显小于30KB，所以这部分常用代码没有划分。如果很容易分开，只要：

优化： {分割区块： {区块： '全部'，minsize : 0}，执行npm运行构建打包命令后检查dist目录

显然，还有一个额外的文件页面a ~页面b ~页面c。[哈希]。检查文件，知道utility2.js中的代码存储在这个文件中。如下图所示(借助webpack-bundle-analyzer插件，详细文章末尾的附录)。

从上图可以看出，React相关代码都放在供应商~ Pagea ~ Pageb ~ Pagec文件中。如果我们想要拉出React代码，我们应该怎么做？

splitChunks: { chunks: ' all '、cache group s 3360 { common s 3360 { chunk s 3360 ' initial '、minChunks: 2、name: 'commons '、Maxinitialrequests: 5、minSize : 0 0，//默认值为30kb。minsize设置为0后，//utility1.js和多次引用的utility2.js将被压缩到commons}中。react base : { test :(module)={ return/react | redux | prop-types/。测试(module . context)；}、//直接使用test进行路径匹配，并拉出相关代码Chunks :' initial '、Name :' react Base '、Priority 3360 10、} } } }，运行Build后如下图所示。

看似完美，但reactBase文件实际包含node_modules，这是一个神奇的问题？室友都睡了，键盘声影响不好，明天再看。

附录

我们将安装一个webpack-bundle-analyzer，这个插件将清楚地显示打包后每个bundle所依赖的模块：

介绍npm i网络包-包-分析器-D:

常量包分析器插件=必需('网络包-包-分析器')。可以使用捆绑包分析器插件并将其添加到插件阵列中：

New BundleAnalyzerPlugin()以上是本文的全部内容。希望对大家的学习有帮助，支持我们。