複習webpack4之splitChunksPlugin

以前學習過webpack3的知識，可是webpack4升級後仍是有不少變更的，因此此次從新整理一下webpack4的知識點，方便之後複習。

此次學習webpack4不只僅要會配置，記住核心API，最好還要理解一下webpack更深層次的知識，好比打包原理等等，因此可能會省略一些比較基礎的內容，可是但願我能夠經過這次學習掌握webpack，更好地應對之後的工做。

1.splitChunksPlugin的配置項

上篇文章咱們嘗試了動態引入庫進行代碼分割，可是上篇文章的插件不是官方推薦的插件，咱們如今改用官方推薦的插件。

cnpm install @babel/plugin-syntax-dynamic-import -D

.babelrc中增長插件

並且咱們能夠給打包出的0.js文件更名字。

這樣打包出的文件名字就已經成功的修改了。

若是咱們不想要vendor~這個前綴，須要去修改一個配置。

這樣打包出的文件就只叫lodash了。

因此咱們能夠經過改變配置項來改變打包後的結果，而splitChunksPlugin還有不少不一樣的配置項，咱們接下來研究一下各個配置項的意思。

2 解讀配置項

optimization: {
    splitChunks: {
        chunks: "async",
        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
            }
    }
}
複製代碼

咱們依次解讀配置項的含義：

2.1 chunks: "async"

chunks: "async"指的是作代碼分割時，只對異步代碼生效。

chunks: "initial"只對同步代碼生效。

若是想對同步異步都生效，首先要把chunks配置成"all"，而後webpack會進行到cacheGroups的vendors中,檢測引入的庫是否在node_modules中，若是檢測成功，就會單獨把引入的代碼打包到vendor中。以前的例子打包成功的文件是vendors~main.js，意思是分割的代碼符合cacheGroups中vendors的配置，而他的入口文件是main.js，因此叫vendors~main.js。若是想更名字，就只vendors中加一個配置filename: "vendors.js"。

2.2 minSize: 30000

若是引入的庫/包，大於30kb的話纔會作代碼分割，若是小於30kb就不會進行代碼分割。

可是若是引入的庫/包沒有在node_modules，webpack就會用cacheGroups中default的配置，打包的文件名就叫default~main.js，也能夠經過增長filename來改變文件名。

2.3 maxSize: 0

maxSize可配置也能夠不用配置，如今配置成maxSize: 50000，若是打包的代碼體積是1MB，webpack會嘗試二次分割，把打包的文件儘可能分紅20份。（通常不配置，瞭解便可）

2.4 minChunks: 1

當一個模塊被用了至少n次時纔會進行代碼分割。

2.5 maxAsyncRequests: 5

同時加載模塊數最可能是5個，webpack遇到這個參數時，代碼分割到5個文件時，就不進行分割了，超過的代碼也不進行代碼分割。好比引了10個庫，打包5個後，剩下5個不進行代碼分割。（默認爲5就能夠）

2.6 maxInitialRequests: 3

入口文件進行加載的時候，最多分割三個文件。（默認爲3就能夠）

2.7 automaticNameDelimiter: '~'

默認文件名字的鏈接符。

2.8 name: true

使cacheGroups中文件名生效。（通常不會改變）

2.9 cacheGroups（緩存組）

在2.1中已經解讀過了，當chunk和minChunks生效時進行匹配的規則。叫緩存組的緣由，好比咱們引入了jquery和lodash，打包jquery的時候先不着急生成文件，先放到cacheGroups中緩存着，打包lodash的時候，也緩存中cacheGroups中，當最後把符合文件都緩存好以後，再一塊兒打包生成vendors文件。

2.10 cacheGroups中的priority （優先級）

打包lodash的時候，既符合vendors又符合default，就要看哪個priority的值更大，哪個值大就打包到哪個文件中。

2.11 reuseExistingChunk: true

打包過程當中，若是一個模塊已經被打包過了，就會忽略這個模塊，去使用以前已經打包過的代碼。

除了這些配置項，其實還有不少配置項，若是須要就去查閱文檔就能夠了。