webpack中怎么實現代碼分片

webpack中怎么實現代碼分片，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

CommonsChunkPlugin

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

• 開發過程中減少了重復模塊打包，可以提升開發速度；

• 減小整體資源體積；

• 合理分片后的代碼可以更有效的利用客戶端緩存。

該插件的默認規則是只要一個模塊被兩個入口chunk所使用就會被提取出來，比如只要a和b用了react，react就會被提取出來。但是它仍有些不足之處：

• 一個CommonChunkPlugin只能提取一個vendor，假如我們想提取多個vendor，則需要配置多個插件，這回增加很多重復的配置代碼。

• 前面我們提到的mainfest實際上使瀏覽器多加載一個資源，這對于頁面渲染速度不是友好的。

• 由于內部設計上的一些缺陷，CommonChunkPlugin在提取公共模塊的時候會破壞掉原有的chunk中模塊的依賴關系，導致難以進行更多的優化。

splitChunks

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

module.exports = {
    entry: './foo.js',
    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，Css Chunk體積假如大于50KB，這個也比較容易理解，如果提取后的資源體積太小，那么帶來的優化效果也一般。

• 在按需加載的過程，并行請求的資源最大值小于等于5，按需加載指的是，通過動態插入script標簽的方式加載腳本。我們一般不希望同時加載過多的資源，因為每一個請求都要花費建立鏈接和釋放鏈接的成本，因此提取的規則只在并行請求不多的時候生效。

• 在首次加載時，并行請求的資源數最大值小于等于3，和上一條類似，只不過在頁面首次加載時往往對性能要求更高，因此這里的默認閥值也更低。

配置

splitChunk：{
    chunks: 'async',
    minSize: {
        javascript: 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的區別就是，不需要頂層加載，即用即加載。因為只是簡單的函數調用，這里不做其他闡述。

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。