欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Webpack中SplitChunksPlugin 配置參數(shù)詳解

 更新時間:2020年03月24日 09:10:36   作者:zgc  
這篇文章主要介紹了Webpack中SplitChunksPlugin 配置參數(shù)詳解,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

代碼分割本身和 webpack 沒有什么關(guān)系,但是由于使用 webpack 可以非常輕松地實現(xiàn)代碼分割,所以提到代碼分割首先就會想到使用 webopack 實現(xiàn)。

在 webpack 中是使用 SplitChunksPlugin 來實現(xiàn)的,由于 SplitChunksPlugin 配置參數(shù)眾多,接下來就來梳理一下這些配置參數(shù)。

官網(wǎng)上的默認配置參數(shù)如下:

module.exports = {
 //...
 optimization: {
  splitChunks: {
   chunks: 'async', // 代碼分割時對異步代碼生效,all:所有代碼有效,inital:同步代碼有效
   minSize: 30000, // 代碼分割最小的模塊大小,引入的模塊大于 30000B 才做代碼分割
   maxSize: 0, // 代碼分割最大的模塊大小,大于這個值要進行代碼分割,一般使用默認值
   minChunks: 1, // 引入的次數(shù)大于等于1時才進行代碼分割
   maxAsyncRequests: 6, // 最大的異步請求數(shù)量,也就是同時加載的模塊最大模塊數(shù)量
   maxInitialRequests: 4, // 入口文件做代碼分割最多分成 4 個 js 文件
   automaticNameDelimiter: '~', // 文件生成時的連接符
   automaticNameMaxLength: 30, // 自動生成的文件名的最大長度
   cacheGroups: {
    vendors: {
     test: /[\\/]node_modules[\\/]/, // 位于node_modules中的模塊做代碼分割
     priority: -10 // 根據(jù)優(yōu)先級決定打包到哪個組里,例如一個 node_modules 中的模塊進行代碼
    }, // 分割,,既滿足 vendors,又滿足 default,那么根據(jù)優(yōu)先級會打包到 vendors 組中。
    default: { // 沒有 test 表明所有的模塊都能進入 default 組,但是注意它的優(yōu)先級較低。
     priority: -20, // 根據(jù)優(yōu)先級決定打包到哪個組里,打包到優(yōu)先級高的組里。
     reuseExistingChunk: true // //如果一個模塊已經(jīng)被打包過了,那么再打包時就忽略這個上模塊
    }
   }
  }
 }
};

補充幾點:

在分組中可以人為地規(guī)定打包后文件的名字,在 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 在執(zhí)行 import a from './a' 時引入 a 模塊,由于 a 模塊中使用了 b 模塊,所以同時也引入了 b 模塊。再執(zhí)行 import b from './b' 時,由于 b 模塊已經(jīng)被打包過了,所以就會忽略掉這個 b 模塊,這就是 reuseExistingChunk: true 的作用。

如果想讓兩個模塊打包到一個文件里應(yīng)該如何實現(xiàn)?

cacheGroup 就可以實現(xiàn)這個需求,假設(shè)有兩個模塊 module1 和 module2,且都滿足 vendor 這個組,那么在進行代碼分割時,會先將 module1 放到 CacheGroup 中,然后再將 module2 放到 cacheGroup 中,最后再將兩者一起放到 vender 組里生成 vender.js 文件。

到此這篇關(guān)于Webpack中SplitChunksPlugin 配置參數(shù)詳解的文章就介紹到這了,更多相關(guān)Webpack SplitChunksPlugin 配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • JavaScript使用Promise實現(xiàn)分批處理接口請求

    JavaScript使用Promise實現(xiàn)分批處理接口請求

    當我們在實際項目中遇到需要批量發(fā)起上百條接口請求怎么辦呢,本文就來為大家介紹一下JavaScript如何使用Promise實現(xiàn)分批處理接口請求,需要的小伙伴可以參考一下
    2023-11-11
  • ES6新特性之類(Class)和繼承(Extends)相關(guān)概念與用法分析

    ES6新特性之類(Class)和繼承(Extends)相關(guān)概念與用法分析

    這篇文章主要介紹了ES6新特性之類(Class)和繼承(Extends)相關(guān)概念與用法,結(jié)合實例形式較為詳細的分析了ES6中類(Class)和繼承(Extends)的基本概念、語法、使用方法與注意事項,需要的朋友可以參考下
    2017-05-05
  • JS封裝的模仿qq右下角消息彈窗功能示例

    JS封裝的模仿qq右下角消息彈窗功能示例

    這篇文章主要介紹了JS封裝的模仿qq右下角消息彈窗功能,涉及javascript事件響應(yīng)、頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
    2018-08-08
  • KnockoutJS數(shù)組比較算法實例詳解

    KnockoutJS數(shù)組比較算法實例詳解

    這篇文章主要介紹了KnockoutJS數(shù)組比較算法實例詳解,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-11-11
  • JavaScript對Json的增刪改屬性詳解

    JavaScript對Json的增刪改屬性詳解

    下面小編就為大家?guī)硪黄狫avaScript對Json的增刪改屬性詳解。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-06
  • uniapp定義動畫的幾種方式總結(jié)

    uniapp定義動畫的幾種方式總結(jié)

    我們都知道,動畫其實是由一幀一幀圖片組成,快遞地播放一組圖片就形成了動畫,下面這篇文章主要給大家介紹了關(guān)于uniapp定義動畫的幾種方式,需要的朋友可以參考下
    2023-02-02
  • JSP中使用JavaScript動態(tài)插入刪除輸入框?qū)崿F(xiàn)代碼

    JSP中使用JavaScript動態(tài)插入刪除輸入框?qū)崿F(xiàn)代碼

    這篇文章主要介紹了JSP中如何使用JavaScript動態(tài)插入刪除輸入框,需要的朋友可以參考下
    2014-06-06
  • JavaScript你不知道的一些數(shù)組方法

    JavaScript你不知道的一些數(shù)組方法

    這篇文章主要介紹了JavaScript你不知道的一些數(shù)組方法,需要的朋友可以參考下
    2017-08-08
  • readonly和disabled的區(qū)別

    readonly和disabled的區(qū)別

    要慎用readonly和disabled, 指定了disabled的表單,在submit時,不會把它的值傳出去, 如下所示,有兩個text,一個是readonly一個是disabled,submit后,只能發(fā)送那個不是disabled的,注意地址欄的值. 要保存到本地,因為submit了,不然,看不到效果.
    2008-04-04
  • JavaScript技巧44招【實用】

    JavaScript技巧44招【實用】

    JavaScript是一個絕冠全球的編程語言,可用于Web開發(fā)、移動應(yīng)用開發(fā)(PhoneGap、Appcelerator)、服務(wù)器端開發(fā)(Node.js和Wakanda)等等。本文主要介紹JavaScript應(yīng)用的一些小技巧。
    2016-12-12

最新評論