本文解释了最近的一个多页项目，它结合了webpack4的splitChunks来拆分代码包

项目框架

该项目有两个入口文件，主页和主题，主要包括：

React、mobx和antd是项目的基本框架，echarts和d3 (drawing)是其他非公开的组件代码和代码，它们在项目的某些页面中在相对较大的组件库src下工作。这两个条目文件是用react-loaded异步加载的

从“react-loaded”导入可加载的；const LoadableLogin=可加载({ loader: ()=import('././common/components/log in’)，loading: Loading，})；webpack部分配置如下：

该模块. exports={ 0.mode:' production '，entry : {//多入口home3360 '。/src/home '，主题： '。/src/topic '，}，output : { path : config . build . asset root，filename: '[name]。js '，public path : process . ENV . node _ ENV===' production '？config . build . assets public path : config . dev . assets public path，}，plugins 3360[new html webpackplugin({//home page filename : ' home . html '，Template 3360。/template.html '，})，新的html webpackplugin({//主题页文件名3360' topic.html '，模板： '。/template.html '，注入： true，})，]，}分割块

组块：

All:分离文件，无论它们是动态加载还是动态加载。第一次加载页面时，会引入异步的所有包：异步加载的文件会被分开，一般不会第一次引入，需要异步引入的组件会被引入。初始：分离异步和非异步文件。如果一个文件是异步和非异步引入的，它将被打包两次(注意与所有的不同)，这用于分离页面第一次需要加载的包。最小文件打包量，以字节为单位，默认值为30000

例如，一个项目下有三个条目文件，a.js、b.js和c.js都是100字节。当我们将minSize设置为301时，webpack会将它们打包成一个包，而不会将它们拆分成多个包。

例如，一个项目下有三个条目文件，a.js、b.js和c.js都是100字节。当我们将minSize设置为301时，webpack会将它们打包成一个包，而不会将它们拆分成多个包。

自动名称分隔符：连接器

假设我们生成一个名为vendor~a~b.js和b.js的公共文件，我们设置的连接器是' ~ '，那么最终生成的就是vendor ~ a ~ b.js。

maxInitialRequests入口点的最大并行请求数，默认为3

如果我们将其设置为1，那么每个条目文件将只打包到一个文件中

最大异步请求数最大异步请求数，默认值为5

如果我们将其设置为1，那么每个条目文件将只打包到一个文件中

优先关系

maxInitialRequest/maxasync requests maxSize minSize .

缓存组自定义拆分包的规则

测试可以配置常规和写入功能作为打包规则。其他属性可以继承splitChunks，所以这里一定要讲优先级，设置包优先级非常重要！(以后结合实践)

最小块

介绍的最少数量

实践

让我们从最简单的配置开始，打包公共代码

拆分分块： {分块：' all '，//initial，async和all minSize: 30000，//形成一个新的代码块，具有最小的卷maxAsyncRequests: 5。//按需加载时的最大初始请求数： 3，//最大初始化请求数：' ~ '，//打包分隔符名称： true，cachegroups 3360 { venders : }//用于打包两页的公共代码minchunks3360 2，//打包两次或更多次的名称： ' Vendors '，//分隔的包chunks: ' all ' }，}，两个入口文件的公共代码打包在venders文件夹下，包括一些三方包

这肯定不是我们想要的结果！存在以下问题：

其实我们进入一个网站，第一步就是进入一个登陆页面。我们需要的只是项目的基本框架代码，比如react、react-dom.antd等。我们可以将它们单独打包，将所有(或初始)作为必须加载到主页上的包。第一次加载页面时，我们只想加载同步加载。因此，我们需要像echarts、d3这样的同步Common包，以及src下的一些异步加载包，并使用async将它们打包成一个独立的异步加载包。我们修改缓存组如下：

cachegroup 3360 { Vendors : {//项目基本框架等。Chunks :' all '，test :/(react | react-DOM | react-DOM-router | Babel-poly ill | mobx)/，priority : 100，Name : ' Vendors '，}，' async-commons ' 3360 {//异步加载公共包和组件等。组块：“异步”，最小组块3360 2，名称3360“异步-公共”，优先级： 90，}，公共3360 {//其他同步加载公共包组块：“全部”，最小组块3360 2，名称3360“公共”，优先级： 80，}，}

webpack这次帮助我们键入的包主要包括：

Async-common:是一个三方包，它的两个入口文件是异步加载的，并且通过使用react-loader来延迟加载代码。vendors:例如echarts、d3和D3，以及同步代码，例如commons:例如react、react-DOM和antd，已经被引用了两次以上。这里有两点需要注意：

注意我们这里的优先级设置，vendorasync-commonscomons。我们首先打包react，react-dom等。首先，然后包装公共部分。如果厂商的优先级设置小于两个公共优先级，那么react，react-dom将被打包到公共包中，不会生成厂商包。如果我们在这里删除commons配置，将会生成一个主题~home包。在我们配置async-common以提取异步加载的公共包之后，我们将默认打包同步加载的公共包，并生成一个名为automaticNameDelimiter连接器“~”的“topic~home”包。内容和公地包一模一样，好吧！根据我们的要求，第一次页面加载只会引入厂商、commons包，不会引入async-common包，挺好的！如果想更精细，仔细想想，能不能做一些更好的优化？

到目前为止，我方包装文件的包装如下：

最大的异步通用包是gzip压缩后的391kb。公司表示，最近由于一些条件限制，生产后速度比较慢的时候，有时候下载速度只能是20kb/s==。那就继续分裂吧！

分析一下：

Async-common包含我们自己编写的src组件和第三方组件。async-common中较大的是echart、zrender(引入了echart)和d3。就项目而言，只有部分页面需要echart(d3也一样)，所以我们可以考虑提取这两个比较大的包，D3和echart，然后在某个页面需要的时候异步加载，这样就大大降低了Async-。修改

cachegroups 3360 { Vendors : {//基本框架chunks3360 ' all '，test 3360/(react | react-DOM | react-DOM-router | babel-poly ill | mobx)/，优先级： 100，名称： ' Vendors '，}，d3 Vendors 3360 {//从大容量的D3中单独提取包，并在页面需要时异步加载测试：/D3/，优先级： 100。//将其设置为高于异步共用。避免打包为异步通用：名称：' d3venodr '，chunks3360 ' async ' }，echart svenor 3360 {//异步加载echart包test 3360/(echart | zrender)/，优先级： 100，//高于异步通用优先级名称：' echartsvenord '，chunks3360 ' async ' }，'异步通用' 3360 {//其他异步加载包chunk 360 ' async '，min chunk 3360

当然，每次修改之后，您都需要在htmlWebpackPlugin中配置chunk所需的包

plugins :[新html webpackplugin({//主页文件名：' home.html '，模板3360 '。/template.html '，chunks 3360 ['vendors '，' commons '，Home']，})，新html webpackkplugin({//主题页文件名：' topic.html '，模板： '。/template.html '，chunks 3360 ['vendors '，' commons '，' Topic']，}]，后期做了其他拆分和优化，最大的包大概保持在10万左右。当然不建议拆分的很小，因为浏览器http1可能支持一次下载文件六次，太多可能会适得其反。每个人可以根据自己的项目做不同的拆分方法。总之就是让项目在网上运行得更完美，给用户更好的体验~

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