H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端问题精选】webpack4中 splitchunks中的配置项 maxAsyncRequests搞不懂,有人实验过么

最近在使用webpack4
在配置maxAsyncRequests 这一项的时候,试验了多次仍搞不懂是啥意思。我本来以为是异步中加载的最多chunk超过了就会合并? 代码如下:
entry: {

pageA: "./pageA", // 引用utility1.js  utility2.js    

},
optimization: {

splitChunks: {
  maxAsyncRequests: 3,
  cacheGroups: {
    default:false,
    commons: {
      chunks: "all",
      minChunks: 1,
      maxInitialRequests: 1, // The default limit is too small to showcase the effect
      maxAsyncRequests: 3,
      minSize: 0,// This is example is too small to create commons chunks,
      priority:2
    }
    
    
    
    \\PageA.js  
    import("./pageE").then(common => {
      console.log(common);
    })
    
 \\PageE.js
 var utility1 = require('./utility1');
 var utility2= require('./utility2');
 var utility3 = require('./utility3');
 
 
 本以为在pageE这个异步请求中可以有3个以内的并行请求,以为utility1-3可以单独分成3个包,结果是只有一个包?有哪位大神明白给讲解下

回答:

在webpack4里,splitChunks的maxAsyncRequests选项指的是”按需加载时的最大并行请求数“,我的理解跟浏览器在同一个域名下的最大并发请求数应该是相关的,以chrome浏览器为例,同域名下的最大并发请求数是6。webpack官方给的参考值是:maxAsyncRequests为5,maxInitialRequests为3。所以,用默认的就好,一般不用去配置。当然,要是maxAsyncRequests设为10,那可能就会出现意想不到的结果,我遇到过浏览器出现卡顿,点任何按钮都没反应的诡异情况!!!

本文地址:H5W3 » 【前端问题精选】webpack4中 splitchunks中的配置项 maxAsyncRequests搞不懂,有人实验过么

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址