提到前端打包工具，毫無疑問想先到的是webpack。但是前端發(fā)展地很快，時不時會有新東西出現(xiàn)，打包工具這邊之前也出現(xiàn)parcel和rollup。各種工具的碰撞，相互汲取優(yōu)點，促進技術(shù)的發(fā)展。

webpack4中支持了零配置的特性，同時對塊打包也做了優(yōu)化， CommonsChunkPlugin 已經(jīng)被移除了，現(xiàn)在是使用 optimization.splitChunks 代替。

下面就開始介紹splitChunks的內(nèi)容。

默認情況

首先webpack會根據(jù)下述條件自動進行代碼塊分割：

• 新代碼塊可以被共享引用，或者這些模塊都是來自node_modules文件夾里面
• 新代碼塊大于30kb（min+gziped之前的體積）
• 按需加載的代碼塊，并行請求最大數(shù)量應該小于或者等于5
• 初始加載的代碼塊，并行請求最大數(shù)量應該小于或等于3

塊打包默認情況下只會影響按需加載模塊，因為對初始塊也進行優(yōu)化打包會影響HTML中的script標簽數(shù)，增加請求數(shù)。

接下來看些例子來理解默認情況的打包。

模塊全部是同步引入

// indexA.js
import React from 'react'
import ReactDOM from 'react-dom'
import _ from 'lodash'

console.log(_.join(['a', 'b'], '~'))

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

默認情況只會影響按需加載模塊，所以所有內(nèi)容全部被打包到一起了。

有模塊動態(tài)導入

這里首先使用符合ECMAScript 提案 的 import() 語法

// indexA.js
import React from 'react'
import ReactDOM from 'react-dom'
import _ from 'lodash'
import(/* webpackChunkName: "async-jquery" */ 'jquery').then(component => {
 console.log(component)
})

console.log(_.join(['a', 'b'], '~'))

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

這里jquery使用動態(tài)導入，打包結(jié)果中可以看到j(luò)query被單獨打包了

react按需加載

同樣的我們試要react按需加載，使用react-router提供的按需加載方案

AsyncModule模塊按上面方案異步加載Dashboard

import React from 'react'
import ReactDOM from 'react-dom'
import {BrowserRouter, Route} from 'react-router-dom'
import AsyncModule from './AsyncModule.jsx'
import _ from 'lodash'
import $ from 'jquery'

console.log(_.join(['a', 'b'], '~'))

ReactDOM.render(
 <div>
 <BrowserRouter>
  <Route path='/' component={AsyncModule} />
 </BrowserRouter>
 </div>,
 document.getElementById('root')
)

從打包結(jié)果可以看到按需加載的模塊被打包到0.js去了。

講完了webpack默認情況下對打包塊的優(yōu)化，接下來看splitChunks配置項。

配置項

相關(guān)配置項：

module.exports = {
 //...
 optimization: {
 splitChunks: {
  chunks: 'async', 
  minSize: 30000,
  minChunks: 1,
  maxAsyncRequests: 5,
  maxInitialRequests: 3,
  automaticNameDelimiter: '~', 
  name: true,
  cacheGroups: {}
 }
 }
}

• chunks: 表示哪些代碼需要優(yōu)化，有三個可選值：initial(初始塊)、async(按需加載塊)、all(全部塊)，默認為async
• minSize: 表示在壓縮前的最小模塊大小，默認為30000
• minChunks: 表示被引用次數(shù)，默認為1
• maxAsyncRequests: 按需加載時候最大的并行請求數(shù)，默認為5
• maxInitialRequests: 一個入口最大的并行請求數(shù)，默認為3
• automaticNameDelimiter: 命名連接符
• name: 拆分出來塊的名字，默認由塊名和hash值自動生成
• cacheGroups: 緩存組。緩存組的屬性除上面所有屬性外，還有test, priority, reuseExistingChunk
  • test: 用于控制哪些模塊被這個緩存組匹配到
  • priority: 緩存組打包的先后優(yōu)先級
  • reuseExistingChunk: 如果當前代碼塊包含的模塊已經(jīng)有了，就不在產(chǎn)生一個新的代碼塊

配置項基本就上面這些，我們重點來看下chunks和cacheGroups。

chunks

chunks的取值是有initial, async, all。默認情況下是async，在本文第一部分已經(jīng)介紹了它的表現(xiàn)，所以現(xiàn)在來看下其它兩個的表現(xiàn)。

initial , all 模式會將所有來自node_modules的模塊分配到一個叫vendors的緩存組；所有重復引用至少兩次的代碼，會被分配到default的緩存組。

// indexA.js
import './Dashboard.jsx'

// indexB.js
import './Dashboard.jsx'

// Dashboard.jsx
import React from 'react'

// webpack.config.js
splitChunks: {
 chunks: 'initial'
}

打包表現(xiàn)正如上面所述，產(chǎn)生了兩個代碼塊vendors, default。

可以通過配置optimization.splitChunks.cacheGroups.default: false禁用default緩存組。

// webpack.config.js
splitChunks: {
 chunks: 'initial',
 cacheGroups: {
 default: false
 }
}

至于all和initial的差別，可以看下這篇文章Webpack 4 — Mysterious SplitChunks Plugin （要科學上網(wǎng)）

里面有提到 initial 模式下會分開優(yōu)化打包異步和非異步模塊。而 all 會把異步和非異步同時進行優(yōu)化打包。也就是說moduleA在indexA中異步引入，indexB中同步引入， initial 下moduleA會出現(xiàn)在兩個打包塊中，而 all 只會出現(xiàn)一個。

cacheGroups

使用cacheGroups可以自定義配置打包塊。

// indexA.js
import React from 'react'
import ReactDOM from 'react-dom'
import _ from 'lodash'
import $ from 'jquery'

// indexB.js
import React from 'react'
import ReactDOM from 'react-dom'
import('lodash')
import $ from 'jquery'

// webpack.config.js
optimization: {
 splitChunks: {
  cacheGroups: {
  commons: {
   name: 'commons',
   chunks: 'initial',
   minChunks: 2
  }
  }
 }
 }

根據(jù)開頭介紹webapck分割條件，一些公共模塊被打包進了commons，自定義打包塊的優(yōu)先級是0，所以現(xiàn)在公共模塊會被打包進commons，而不是上述提到的默認打包塊vendors（優(yōu)先級為負）。

但是這邊為什么lodash為什么沒打包在一起呢？可以回顧下initial和all的區(qū)別。接下來實驗下all的效果。

// indexA, indexB同上
// webpack.config.js
optimization: {
 splitChunks: {
  cacheGroups: {
   commons: {
    name: 'commons',
    chunks: 'all',
    minChunks: 2
   }
  }
 }
}

結(jié)果在預期中，lodash被打包在一起了。

提取第三方庫

最后看下之前CommonsChunkPlugin常用的分離部分第三方庫功能。這邊你可以想一下怎么操作。

上面已經(jīng)提到了設(shè)置 chunks: initial || all 都可以提取出第三方庫。但是它是把所有第三庫提取出來，所以我們在只提取react和react-dom的情況下，需要自定義一個cacheGroup。

// indexA.js
import React from 'react'
import ReactDOM from 'react-dom'
import _ from 'lodash'
import $ from 'jquery'

// webpack.config.js
entry: {
 indexA: path.join(__dirname, 'src/indexA.js')
},
optimization: {
 splitChunks: {
  chunks: 'all',
  cacheGroups: {
   vendors: {
    test: /react/,
    name: 'vendors'
   }
  }
 }
}

我們?nèi)ブ貙懥藇endors打包塊，只打包匹配react的模塊，所以達到了之前CommonsChunkPlugin的功能。

或者

// index.jsx
import React from 'react'
import ReactDOM from 'react-dom'

// webpack.config.js
entry: {
 indexA: path.join(__dirname, 'src/indexA.js'),
 vendor: ["react", "react-dom"]
},
optimization: {
 splitChunks: {
  cacheGroups: {
   vendor: {
    name: "vendor",
    chunks: "initial"
   }
  }
 }
}

optimization.runtimeChunk

最后提一下runtimeChunk，通過 optimization.runtimeChunk: true 選項，webpack會添加一個只包含運行時(runtime)額外代碼塊到每一個入口。（譯注：這個需要看場景使用，會導致每個入口都加載多一份運行時代碼）

總結(jié)

webpack4的splitChunks功能是比較強大的，不過推薦還是使用默認模式，或者提取一下第三方庫。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論