目錄

• 背景
  
• CommonsChunkPlugin
  
• splitChunks
  
• 配置
  
• 非同步載入資源
  
• 總結
  

背景

實現高效能應用其中最重要的一點就是儘可能地讓使用者每次只加載必要的資源，優先順序不要太高的資源則採用延遲載入等技術漸進式地獲取，這樣可以保證頁面的首屏速度。程式碼分片是webpck打包工具所特有的一項技術，通過這項功能可以把程式碼按照特定的形式進行拆分，使使用者不必一次全部載入，而是按需載入。

CommonsChunkPlugin

雖然這個外掛在webpack4當中已經不推薦使用，但是我們還是要了解一下。這個外掛可以將多個Chunk中的公共的部分提取出來。公共模組提取可以為幾個專案帶來幾個收益：

• 開發過程中減少了重複模組打包，可以提升開發速度；
• 減小整體資源體積；
• 合理分片後的程式碼可以更有效的利用客戶端快取。

該外掛的預設規則是隻要一個模組被兩個入口chunk所使用就會被提取出來，比如只要a和b用了react，react就會被提取出來。但是它仍有些不足之處：

• 一個CommonChunkPlugin只能提取一個vendor，假如我們想提取多個vendor，則需要配置多個外掛，這回增加很多重複的配置程式碼。
• 前面我們提到的mainfest實際上使瀏覽器多載入一個資源，這對於頁面渲染速度不是友好的。
• 由於內部設計上的一些缺陷，CommonChunkPlugin在提取公共模組的時候會破壞掉原有的chunk中模組的依賴關係，導致難以進行更多的優化。

splitChunks

這是webpack新增的一個功能，改進了CommonChunkPlugin而重新設計和實現的程式碼分片特性，不僅比CommonChunkPlugin功能更加強大，還更簡單易用。程式碼如下

module.exports = {
    entry: './foo.',output: {
        filename: 'foo.js',publicPath: '/dist/'
    },mode: 'development',optimization: {
        splitChunks: {
            chunks: 'all',}
    }
}

// foo.js
import React from 'react';
import('./bar.js');
document.write('foo.js',React.version);

// bar.js
import react from 'react';
console.log('bar.js',React.version);

splitChunk預設情形下的提取條件:

• 提取後的chunk可被共享或者來自node_modules目錄。這一條很容易理解，被多次引用或處於node_modules中的模組更傾向於是通用模組，比較適合被提取出來。
• 提取後的js chunk會有相應的體積，比如大於30KB， Chunk體積假如大於50KB，這個也比較容易理解，如果提取後的資源體積太小，那麼帶www.cppcns.com來的優化效果也一般。
• 在按需載入的過程，並行請求的資源最大值小於等於5，按需載入指的是，通過動態插入script標籤的方式載入。我們一般不希望同時載入過多的資源，因為每一個請求都要花費建立連結和釋放連結的成本，因此提取的規則只在並行請求不多的時候生效。
• 在首次載入時，並行請求的資源數最大值小於等於3，和上一條類似，只不過在頁面首次載入時往往對效能要求更高，因此這裡的預設閥值也更低。

配置

splitChunk：{
    chunks: 'async',minSize: {
        : 30000,style: 50000,},maxSize: 0,minChunks: 1,maxAsyncRequests: 5,maxInitialRequests: 3,automaticNameDelimiter: '~'，
    name: true客棧,cacheGroups:{
        vendor: {
            test: /[\\/]node_modules[\\/]/,priority: -10,default: {
            minChunks: 2,priority: -20,reuseExistingChunk: true
        }
    }
}

匹配模式
chunks的值有三個，async（預設）、initial、all。async只提取非同步chunks，initial只對入口chunk生效，all兩種模式同時開啟（推薦使用）

匹配條件
minSize、minChunks、maxAsyncRequests、maxInitialRequests

命名
預設為true，它意味著可以根據不能cacheGroups和作用範圍自動為新生成的chunk命名，並以automaticNameDelimiter分隔。

cacheGroup
可以理解為分離chunks時 的規則，預設情況下兩種規則：vendors和default。vendors
用於提取所有node_modules中符合條件的模組，default則作用於被多次引用的模組。可以對這些規則進行增加或者修改，如果要禁用某種規則，也可以直接將其設定為false。當一個模組同時符合多個cacheGroups時，則更具其中的priority配置項確定優先順序。

非同步載入資源

資源非同步載入主要解決的問題是，當模組數量過多，資源體積過大時，可以把一些暫時使用不到的模組延遲載入。這樣使頁面初次渲染的時候使用者下載的資源儘可能小，後續的模組等到需要的時候在再去觸發載入，因此這種一般都叫做按需載入。
webpack中有兩種非同步載入的方式，import(webapck2開始)和require.ensure（webapck1），import和es6 module的區別就是，不需要頂層載入，即用即載入。因為只是簡單的函式呼叫，這裡不做其他闡述。

總結

程式碼分片有幾種方式---CommonChunkPlugin或SplitChunks，以及非同步資源載入。藉助這些方法可以有效的縮小資源體積，同時更好的利用快取，給使用者更友好的體驗。

到此這篇關於webpack程式碼分片的實現的文章就介紹到這了,更多相關webpack程式碼分片內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！