理解webpack4.splitChunks之maxInitialRequests

本文轉載自查看原文 2019-01-24 18:41 2370 技術/ webpack splitChunks maxInitialRequests

　　maxInitialRequests是splitChunks里面比較難以理解的點之一，它表示允許入口並行加載的最大請求數，之所以有這個配置也是為了對拆分數量進行限制，不至於拆分出太多模塊導致請求數量過多而得不償失。

　　這里需要注意幾點：

入口文件本身算一個請求
如果入口里面有動態加載得模塊這個不算在內
通過runtimeChunk拆分出的runtime不算在內
只算js文件的請求，css不算在內
如果同時又兩個模塊滿足cacheGroup的規則要進行拆分，但是maxInitialRequests的值只能允許再拆分一個模塊，那尺寸更大的模塊會被拆分出來

　　是不是感覺還是太抽象了難以理解，我下面會通過一個例子來實際演示一下：

　　我在webpack里面配置三個入口文件entry1.js、entry2.js和entry3.js：

　　splitChunks的配置如下基本就是默認配置（只不過把chunks的范圍改為了all）：

splitChunks: {
      chunks: 'all',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }

　　entry1.js：

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

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'))

　　打包結果：