网络包拆分实用指南

说到前端打包工具，毫无疑问你首先要的就是webpack。但前端发展迅速，新事物时有出现。包裹和汇总出现在打包工具之前。各种工具的碰撞可以互相取长补短，促进技术的发展。

webpack4支持零配置功能，块封装也进行了优化。CommonsChunkPlugin已被删除，现在被优化取代。

让我们开始介绍splitChunks的内容。

默认情况

首先，webpack会根据以下条件自动划分代码块：

新的代码块可以被共享和引用，或者这些模块都是node_modules文件夹中的代码块，这些代码块根据需要加载有大于30kb的新代码块(mingziped之前的卷)。并行请求的最大数量应小于或等于最初加载的5个代码块，并行请求的最大数量应小于或等于3个。默认情况下，打包只会影响按需加载的模块，因为优化初始块的打包会影响HTML中脚本标签的数量，并增加请求的数量。

接下来，看一些例子来理解默认包装。

模块全部同步引入

//indexA.jsimport从“React”导入ReactDOM从“react-dom”导入_从“lodash”控制台导入. log(_。join(['a '，' b']，' ~ '))react DOM . render(displitchunk/div，document . getelementbyid(' root '))

默认情况下，它只影响按需加载模块，所以一切都打包在一起。

模块的动态导入

这里，首先使用符合ECMAScript建议的import()语法

//indexA.jsimport从' React '导入ReactDOM从' React-DOM ' import _ from ' lodash ' import(/* WebPACKchunk name : ' async-jquery ' */' jquery ')。然后(component={ console . log(component)})console . log(_。join(['a '，' b']，' ~ '))react DOM . render(displitchunk/div，document . getelementbyid(' root '))

在这里，jquery使用动态导入，您可以看到jquery在打包结果中是单独打包的

按需反应负载

同样，我们尝试通过react按需加载，并使用react-router提供的按需加载方案

AsyncModule模块根据上述方案异步加载Dashboard

从“react”导入react从“react-dom”导入React从“react-router-dom”导入{BrowserRouter，Route}“导入AsyncModule from”。/async module . jsx ' import _ from ' lo dash ' import $ from ' jquery ' console . log(_)。join(['a '，' b']，' ~ '))react DOM . render(div BrowserRouter Route path='/' component={ async module }//BrowserRouter/div，document . getelementbyid(' root '))

从打包结果中，我们可以看到按需加载的模块被打包到0.js中

在webpack中默认完成了打包块的优化之后，让我们看看splitChunks配置项。

配置项目

相关配置项目：

module.exports={ //.optimization : { splitchunk s 3360 { chunk s : ' async '，minSize: 30000，minChunks: 1，maxAsyncRequests: 5，Maxinitialrequests: 3，automaticname limiter:' ~ '，name3360 true，cachegroups 3360 } } } chunk s 3:表示需要优化哪些代码。有三个可选值：初始(初始块)、异步(按需加载块)和全部(所有块)。默认值为async minSize:表示压缩前的最小模块大小，默认值为30000 minChunks:表示引用数。默认值为1 maxAsyncRequests:即按需加载时并行请求的最大数量，5 maxInitialRequests:即一个条目的最大并行请求数量，3 automaticNameDelimiter:即按命名连接器名称拆分的块的名称：缓存组3360默认情况下由块名称和哈希值自动生成。除了上述所有属性之外，缓存组属性还包括test、priority、reusexistinghunk test:用于控制该缓存组将哪些模块匹配到priority:reuseExistingChunk:的优先级。如果当前代码块中包含的模块已经存在，则不会生成新的代码块配置项。基本上这些都在上面。我们将关注区块和缓存组。

大块

区块的值是初始的，异步的，所有的。Async是默认的，它的性能在本文的第一部分已经介绍过了，所以让我们看看另外两个性能。

最初，所有模式会将node_modules中的所有模块分配给一个名为vendors的缓存组；所有重复引用至少两次的代码都将被分配到默认缓存组。

//indexA.jsimport '。/dashboard . jsx '/indexb . jsimport '。/dashboard . jsx '/dashboard . jsximport从' React '/web pack . config . jssplitchunk s 3360 { chunk s 3360 ' initial ' }反应过来

打包性能如上所述，导致两个代码块供应商，默认。

您可以通过配置optimization . split chucks . cachegroups . default : false来禁用默认缓存组。

//web pack . config . jssplitchunk 3360 { chunk 3360 ' initial '，cachegroups 3360 { default : false } }

至于all和initial的区别，你可以阅读这篇文章web pack 4-神秘的分割块插件

提到异步和非异步模块将在初始模式下分别进行优化和打包。所有包同时进行异步和非异步优化。也就是说，moduleA在indexA中异步引入，在indexB中同步引入。moduleA将出现在initial下的两个打包块中，而总共只会出现一个。

缓存组

使用缓存组自定义打包块的配置。

//indexA.jsimport从“react”导入ReactDOM从“react-dom”导入_从“lodash”导入$从“jquery”/indexb . jsimport从“React”导入ReactDOM从“react-dom”导入(‘lo dash’)导入$从“jquery”/web pack . config . jsoptimization : { splitchucks 3360 { cachegroups 3360 { common s : { name 3: ' commons }，chunks: ' initial '，minChunks:

根据开头介绍的webapck分段条件，部分公共模块打包成commons，自定义打包块的优先级为0，所以现在将公共模块打包成commons，而不是上面提到的默认打包块厂商(优先级为负)。

但是为什么这里没有装洛达士呢？你可以回顾一下初始和全部的区别。然后实验所有的效果。

//indexA，indexB同上//webpack.config.js优化： {分割组块： {缓存组： {共享空间3360 {名称： '共享空间'，组块3360 '全部'，最小组块3360 2 } } } } }

不出所料，lodash被包装在一起。

提取第三方库

最后，看看CommonsChunkPlugin常用的一些第三方库的分离功能。你可以想想怎么这样操作。

上面已经提到，设置chunks: initial | | all可以提取第三方库。然而，它提取了所有的第三个库，所以当我们只提取react和react-dom时，我们需要定制一个cacheGroup。

//indexa . jsimport React from ' React ' import React DOM from ' React-DOM ' import _ from ' lodash ' import $

我们重写了厂商的打包块，只打包了匹配的模块，所以实现了CommonsChunkPlugin之前的功能。

或者.

//index.jsximport从' React '中反应从' React-DOM '/web pack . config . jsentry : { indexa : path . join(_ dirname，' src/indexA.js ')，vendor: ['react '，' react-dom']}，optimization : { splitchunk s 3360 { cachegroups 3360 { vendor : { name 3: ' vendor '，chunks: 'initial' })

优化. runtimeChunk

最后，提到runtimeChunk。通过优化选项。运行时Chunk : True，webpack将向每个门户添加一个只包含运行时的额外代码块。(翻译：这需要根据场景使用，这会导致每个条目加载额外的运行时代码)

摘要

webpack4的splitChunks功能相当强大，但建议使用默认模式或提取第三方库。

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