ProgressPlugin

2023-06-03 14:53 更新

?ProgressPlugin? 提供了一種自定義如何在編譯過程中報告進度的方法。

Usage

創(chuàng)建 ?ProgressPlugin? 的一個實例,并提供一個允許的參數。

Providing ?function?

提供一個處理函數,當鉤子報告進度時調用它。處理程序函數參數:

  • ?percentage?:0到1之間的數字,表示編譯完成的百分比
  • ?Message?:當前正在執(zhí)行的鉤子的簡短描述
  • ?…args?:零個或多個描述當前進度的附加字符串
const handler = (percentage, message, ...args) => {
  // e.g. Output each progress message directly to the console:
  console.info(percentage, message, ...args);
};

new webpack.ProgressPlugin(handler);

Providing ?object?

當向 ?ProgressPlugin? 提供 object 時,支持以下屬性:

  • ?activeModules (boolean = false)?:顯示活動模塊數和一個正在進行的活動模塊消息。
  • ?entries (boolean = true)?:顯示正在進行的條目計數消息。
  • ?handler?
  • ?modules (boolean = true)?:顯示正在進行的模塊計數消息。
  • ?modulesCount (number = 5000)?:開始的最小模塊數。啟用modules屬性后生效。
  • ?profile (boolean = false)?:告訴ProgressPlugin收集進度步驟的概要數據。
  • ?dependencies (boolean = true)?:顯示正在進行的依賴項消息的計數。
  • ?dependenciesCount (number = 10000)?:開始的最小依賴計數。啟用dependencies屬性時生效。
  • ?percentBy (string = null: 'entries' | 'dependencies' | 'modules' | null)?:告訴 ?ProgressPlugin? 如何計算進度百分比。
new webpack.ProgressPlugin({
  activeModules: false,
  entries: true,
  handler(percentage, message, ...args) {
    // custom logic
  },
  modules: true,
  modulesCount: 5000,
  profile: false,
  dependencies: true,
  dependenciesCount: 10000,
  percentBy: null,
});

Percentage calculation

默認情況下,進度百分比根據已構建模塊數和總模塊數計算: built / total

模塊總數事先是未知的,并且在構建過程中會發(fā)生變化。這可能導致不準確的進度百分比。

為了解決這個問題,?ProgressPlugin? 緩存最后已知的模塊總數,并在下一個構建中重用這個值。第一次構建將加熱緩存,但后續(xù)構建將使用并更新此值。

我們建議對具有多個配置入口點的項目使用?percentBy: 'entries'?設置。百分比計算將變得更加準確,因為入口點的數量是預先知道的。

Supported Hooks

下面的鉤子向?ProgressPlugin?報告進度信息。

Compiler

  • compilation
  • emit*
  • afterEmit*
  • done

Compilation

  • buildModule
  • failedModule
  • succeedModule
  • finishModules*
  • seal*
  • optimizeDependenciesBasic*
  • optimizeDependencies*
  • optimizeDependenciesAdvanced*
  • afterOptimizeDependencies*
  • optimize*
  • optimizeModulesBasic*
  • optimizeModules*
  • optimizeModulesAdvanced*
  • afterOptimizeModules*
  • optimizeChunksBasic*
  • optimizeChunks*
  • optimizeChunksAdvanced*
  • afterOptimizeChunks*
  • optimizeTree*
  • afterOptimizeTree*
  • optimizeChunkModulesBasic*
  • optimizeChunkModules*
  • optimizeChunkModulesAdvanced*
  • afterOptimizeChunkModules*
  • reviveModules*
  • optimizeModuleOrder*
  • advancedOptimizeModuleOrder*
  • beforeModuleIds*
  • moduleIds*
  • optimizeModuleIds*
  • afterOptimizeModuleIds*
  • reviveChunks*
  • optimizeChunkOrder*
  • beforeChunkIds*
  • optimizeChunkIds*
  • afterOptimizeChunkIds*
  • recordModules*
  • recordChunks*
  • beforeHash*
  • afterHash*
  • recordHash*
  • beforeModuleAssets*
  • beforeChunkAssets*
  • additionalChunkAssets*
  • record*
  • additionalAssets*
  • optimizeChunkAssets*
  • afterOptimizeChunkAssets*
  • optimizeAssets*
  • afterOptimizeAssets*
  • afterSeal*

Source


以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號