Webpack中SplitChunksPlugin 配置引數詳解
阿新 • • 發佈:2020-03-24
程式碼分割本身和 webpack 沒有什麼關係,但是由於使用 webpack 可以非常輕鬆地實現程式碼分割,所以提到程式碼分割首先就會想到使用 webopack 實現。
在 webpack 中是使用 SplitChunksPlugin來實現的,由於 SplitChunksPlugin
配置引數眾多,接下來就來梳理一下這些配置引數。
官網上的預設配置引數如下:
module.exports = { //... optimization: { splitChunks: { chunks: 'async', // 程式碼分割時對非同步程式碼生效,all:所有程式碼有效,inital:同步程式碼有效 minSize: 30000, // 程式碼分割最小的模組大小,引入的模組大於 30000B 才做程式碼分割 maxSize: 0, // 程式碼分割最大的模組大小,大於這個值要進行程式碼分割,一般使用預設值 minChunks: 1, // 引入的次數大於等於1時才進行程式碼分割 maxAsyncRequests: 6, // 最大的非同步請求數量,也就是同時載入的模組最大模組數量 maxInitialRequests: 4, // 入口檔案做程式碼分割最多分成 4 個 js 檔案 automaticNameDelimiter: '~', // 檔案生成時的連線符 automaticNameMaxLength: 30, // 自動生成的檔名的最大長度 cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, // 位於node_modules中的模組做程式碼分割 priority: -10 // 根據優先順序決定打包到哪個組裡,例如一個 node_modules 中的模組進行程式碼 }, // 分割,,既滿足 vendors,又滿足 default,那麼根據優先順序會打包到 vendors 組中。 default: { // 沒有 test 表明所有的模組都能進入 default 組,但是注意它的優先順序較低。 priority: -20, // 根據優先順序決定打包到哪個組裡,打包到優先順序高的組裡。 reuseExistingChunk: true // //如果一個模組已經被打包過了,那麼再打包時就忽略這個上模組 } } } } };
補充幾點:
在分組中可以人為地規定打包後文件的名字,在 vendor 分組中新增
filename = "vendor.js"
之後,在 vendor 分組中打包後文件的名字都是vendor.js
。reuseExistingChunk
例項講解:// a.js import b from './b'; // index.js import a from './a'; import b from './b';
在上述程式碼中,index.js 在執行
import a from './a'
時引入 a 模組,由於 a 模組中使用了 b 模組,所以同時也引入了 b 模組。再執行import b from './b'
reuseExistingChunk: true
的作用。如果想讓兩個模組打包到一個檔案裡應該如何實現?
cacheGroup 就可以實現這個需求,假設有兩個模組 module1 和 module2,且都滿足 vendor 這個組,那麼在進行程式碼分割時,會先將 module1 放到 CacheGroup 中,然後再將 module2 放到 cacheGroup 中,最後再將兩者一起放到 vender 組裡生成 vender.js 檔案。
完,如有不恰當之處,歡迎指正