背景

實(shí)現(xiàn)高性能應(yīng)用其中最重要的一點(diǎn)就是盡可能地讓用戶每次只加載必要的資源，優(yōu)先級(jí)不要太高的資源則采用延遲加載等技術(shù)漸進(jìn)式地獲取，這樣可以保證頁(yè)面的首屏速度。代碼分片是webpck打包工具所特有的一項(xiàng)技術(shù)，通過(guò)這項(xiàng)功能可以把代碼按照特定的形式進(jìn)行拆分，使用戶不必一次全部加載，而是按需加載。

CommonsChunkPlugin

雖然這個(gè)插件在webpack4當(dāng)中已經(jīng)不推薦使用，但是我們還是要了解一下。這個(gè)插件可以將多個(gè)Chunk中的公共的部分提取出來(lái)。公共模塊提取可以為幾個(gè)項(xiàng)目帶來(lái)幾個(gè)收益：

• 開(kāi)發(fā)過(guò)程中減少了重復(fù)模塊打包，可以提升開(kāi)發(fā)速度；
• 減小整體資源體積；
• 合理分片后的代碼可以更有效的利用客戶端緩存。

該插件的默認(rèn)規(guī)則是只要一個(gè)模塊被兩個(gè)入口chunk所使用就會(huì)被提取出來(lái)，比如只要a和b用了react，react就會(huì)被提取出來(lái)。但是它仍有些不足之處：

• 一個(gè)CommonChunkPlugin只能提取一個(gè)vendor，假如我們想提取多個(gè)vendor，則需要配置多個(gè)插件，這回增加很多重復(fù)的配置代碼。
• 前面我們提到的mainfest實(shí)際上使瀏覽器多加載一個(gè)資源，這對(duì)于頁(yè)面渲染速度不是友好的。
• 由于內(nèi)部設(shè)計(jì)上的一些缺陷，CommonChunkPlugin在提取公共模塊的時(shí)候會(huì)破壞掉原有的chunk中模塊的依賴關(guān)系，導(dǎo)致難以進(jìn)行更多的優(yōu)化。

splitChunks

這是webpack新增的一個(gè)功能，改進(jìn)了CommonChunkPlugin而重新設(shè)計(jì)和實(shí)現(xiàn)的代碼分片特性，不僅比CommonChunkPlugin功能更加強(qiáng)大，還更簡(jiǎn)單易用。代碼如下

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默認(rèn)情形下的提取條件:

• 提取后的chunk可被共享或者來(lái)自node_modules目錄。這一條很容易理解，被多次引用或處于node_modules中的模塊更傾向于是通用模塊，比較適合被提取出來(lái)。
• 提取后的js chunk會(huì)有相應(yīng)的體積，比如大于30KB，Css Chunk體積假如大于50KB，這個(gè)也比較容易理解，如果提取后的資源體積太小，那么帶來(lái)的優(yōu)化效果也一般。
• 在按需加載的過(guò)程，并行請(qǐng)求的資源最大值小于等于5，按需加載指的是，通過(guò)動(dòng)態(tài)插入script標(biāo)簽的方式加載腳本。我們一般不希望同時(shí)加載過(guò)多的資源，因?yàn)槊恳粋€(gè)請(qǐng)求都要花費(fèi)建立鏈接和釋放鏈接的成本，因此提取的規(guī)則只在并行請(qǐng)求不多的時(shí)候生效。
• 在首次加載時(shí)，并行請(qǐng)求的資源數(shù)最大值小于等于3，和上一條類(lèi)似，只不過(guò)在頁(yè)面首次加載時(shí)往往對(duì)性能要求更高，因此這里的默認(rèn)閥值也更低。

配置

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的值有三個(gè)，async（默認(rèn)）、initial、all。async只提取異步chunks，initial只對(duì)入口chunk生效，all兩種模式同時(shí)開(kāi)啟（推薦使用）

匹配條件
minSize、minChunks、maxAsyncRequests、maxInitialRequests

命名
默認(rèn)為true，它意味著可以根據(jù)不能cacheGroups和作用范圍自動(dòng)為新生成的chunk命名，并以automaticNameDelimiter分隔。

cacheGroup
可以理解為分離chunks時(shí) 的規(guī)則，默認(rèn)情況下兩種規(guī)則：vendors和default。vendors
用于提取所有node_modules中符合條件的模塊，default則作用于被多次引用的模塊?？梢詫?duì)這些規(guī)則進(jìn)行增加或者修改，如果要禁用某種規(guī)則，也可以直接將其設(shè)置為false。當(dāng)一個(gè)模塊同時(shí)符合多個(gè)cacheGroups時(shí)，則更具其中的priority配置項(xiàng)確定優(yōu)先級(jí)。

異步加載資源

資源異步加載主要解決的問(wèn)題是，當(dāng)模塊數(shù)量過(guò)多，資源體積過(guò)大時(shí)，可以把一些暫時(shí)使用不到的模塊延遲加載。這樣使頁(yè)面初次渲染的時(shí)候用戶下載的資源盡可能小，后續(xù)的模塊等到需要的時(shí)候在再去觸發(fā)加載，因此這種一般都叫做按需加載。
webpack中有兩種異步加載的方式，import(webapck2開(kāi)始)和require.ensure（webapck1），import和es6 module的區(qū)別就是，不需要頂層加載，即用即加載。因?yàn)橹皇呛?jiǎn)單的函數(shù)調(diào)用，這里不做其他闡述。

總結(jié)

代碼分片有幾種方式---CommonChunkPlugin或SplitChunks，以及異步資源加載。借助這些方法可以有效的縮小資源體積，同時(shí)更好的利用緩存，給用戶更友好的體驗(yàn)。

到此這篇關(guān)于webpack代碼分片的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)webpack代碼分片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論