理解webpack4.splitChunks之maxAsyncRequests

　　maxAsyncRequests和maxInitialRequests有相似之處，它倆都是用來限制拆分數量的，maxInitialRequests是用來限制入口的拆分數量而maxAsyncRequests是用來限制異步模塊內部的並行最大請求數的，說白了你可以理解為是每個import()它里面的最大並行請求數量。

　　這其中要注意以下幾點：

　　1、import()文件本身算一個請求

　　2、並不算js以外的公共資源請求比如css

　　3、如果同時有兩個模塊滿足cacheGroup的規則要進行拆分，但是maxInitialRequests的值只能允許再拆分一個模塊，那尺寸更大的模塊會被拆分出來

　　我們還是通過一個例子來解釋一下，我定義三個入口文件entry1.js、entry2.js和entry3，entry1.js里面動態加載page1.js

　　webpack的配置如下：

　　因為默認的maxAsyncRequests為5太大了，不方便測試，所以改為了3

　　

　　entry1.js：

import React from 'react'
import ReactDOM from 'react-dom'

const App = () => {
  let Page1 = null

  import(/* webpackChunkName: "page1" */'./routes/page1').then(comp => {
    Page1 = comp
  })

  return (
    <div>
      <div>App</div>
      <Page1 />
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

　　entry2.js

import React from 'react'
import ReactDOM from 'react-dom'
import $ from './assets/jquery'

const App = () => {
  console.log($)
  return (
    <div>
      <div>entry2</div>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

　　entry3.js

import React from 'react'
import ReactDOM from 'react-dom'
import OrgChart from './assets/orgchart'

const App = () => {
  return (
    <div>
      <div>App</div>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

　　page1.js

import React from 'react'
import _ from 'lodash'
import $ from '../assets/jquery'
import OrgChart from '../assets/orgchart'

const Page1 = () => {
  return (
    <div>
      <div>Page1</div>
    </div>
  )
}

export default Page1

　　打包結果：

　　讓我們分享一下打包結果，主要是看和page1有關的，因為page1是通過import()動態引入的

　　1、vendors~page1.chunkhash.chunk.js是page1里面引入的第三方庫lodash，這個是根據cacheGroups進行拆分的，如果不明白可以去看我之前的文章《理解webpack4.splitChunks之cacheGroups》

　　2、page1.chunkhash.chunk.js是page1.js文件本身，這個也沒問題，如果不明白為啥import()的文件會被拆分可以去看我的第一篇文章《理解webpack.splitChunks》

　　3、default~entry2~page1.chunkhash.js這個拆分的entry2和page1的共用文件jquery.js，這個是根據cacheGroups進行拆分的，如果不明白可以去看我之前的文章《理解webpack4.splitChunks之cacheGroups》

　　那么page1這個異步模塊的並發請求數正好是設置的最大值3，符合maxAsyncRequests

　　這里我們發現除了jquery.js之外page1.js和entry3.js還共同引入了orgchart.js文件，但是卻沒有被拆分出來，這就是因為maxAsyncRequests的限制，如果我們把值改為4呢？

　　改為4后進行打包，打包的結果如下：

　　

　　我們發現orgchart.js被打包出來了，這個時候page1.js的最大請求數量也變成了4個。

 

　　注意： 這里有一個小問題，為啥是jquery.js被拆分了而不是orgchart.js？

　　仔細看文章的小伙伴應該會發現我在文章開頭提到的需要注意的幾個點中最后一點，在匹配maxAsyncRequests這個條件進行拆分的時候尺寸大的包會先被拆分

　　

　　由上圖我們知道jquery.js的尺寸遠遠大於orgchart.js的尺寸，所以它被先拆分了。

　　

　　PS：至於vendors~page1.chunkhash.chunk.js為啥沒有把react拆出來可以去看我的最后一篇博客《理解webpack之其余要點》