preload webpack plugin下載 - preload webpack plugin源代碼下載

preload webpack plugin

網站數據

3.0.0 alpha 1

下載

預加載 - 韋布帕克 - plugin

棄用：可以使用該項目的叉子，https：//github.com/vuejs/preload-webpack-plugin。

使用<link rel='preload'> JavaScript塊的Webpack插件，用於自動將異步（和其他類型）的JavaScript塊接線。這有助於懶惰加載。

注意：這是html-webpack-plugin的擴展插件 - 一個簡化HTML文件以服務您的WebPack捆綁包的插件。

介紹

預緊力是一種網絡標準，旨在改善資源的性能和顆粒狀負載。這是一個聲明性的獲取，可以告訴瀏覽器開始獲取來源，因為開發人員知道很快就需要資源。預付：這有什麼好處？如果您以前從未使用過該功能，則建議閱讀。

在簡單的Web應用程序中，指定要預加載的腳本的靜態路徑是直接的 - 尤其是如果它們的名稱或位置不太可能更改。在更複雜的應用程序中，可以將JavaScript分為具有動態名稱的“塊”（代表路由或組件）。這些名稱可以包括可以隨著每個構建而更改的哈希，數字和其他屬性。

例如， chunk.31132ae6680e598f8879.js 。

為了使將異步塊連接到懶惰加載變得更加容易，此插件提供了一種使用<link rel='preload'>將它們連接起來的插入方式。

先決條件

該模塊需要WebPack V4及以上。它還要求您在WebPack項目中使用html-webpack-plugin 。

安裝

首先，將軟件包作為package.json中的依賴項安裝。

$ npm install --save-dev preload-webpack-plugin

用法

在您的webpack配置中， require()預加載插件如下：

 const PreloadWebpackPlugin = require ( 'preload-webpack-plugin' ) ;

最後，在HtmlWebpackPlugin之後，將插件添加到WebPack配置的plugins陣列：

plugins: [
  new HtmlWebpackPlugin ( ) ,
  new PreloadWebpackPlugin ( )
]

預裝文件時，插件將使用不同的as取決於每個文件的類型。對於每個文件以.css結尾，插件將用as=style預緊插入，每個文件以.woff2結尾，插件將用as=font進行預加載，而對於所有其他文件，將使用as=script 。

如果您不希望確定as取決於文件名的後綴，則也可以使用as明確命名：

plugins: [
  new HtmlWebpackPlugin ( ) ,
  new PreloadWebpackPlugin ( {
    rel : 'preload' ,
    as : 'script'
  } )
]

如果您需要對as屬性進行更細粒度的控制，則也可以在此處提供功能。使用時，將提供輸入名稱作為參數，函數本身應返回一個屬性as字符串：

plugins: [
  new HtmlWebpackPlugin ( ) ,
  new PreloadWebpackPlugin ( {
    rel : 'preload' ,
    as ( entry ) {
      if ( / .css$ / . test ( entry ) ) return 'style' ;
      if ( / .woff$ / . test ( entry ) ) return 'font' ;
      if ( / .png$ / . test ( entry ) ) return 'image' ;
      return 'script' ;
    }
  } )
]

請注意，如果在預加載前使用as=font ，則還將添加crossorigin 。可以在本文中找到解釋，並且可以在MDN上找到as值列表。

默認情況下，該插件將假設異步腳本塊將被預加載。這相當於：

plugins: [
  new HtmlWebpackPlugin ( ) ,
  new PreloadWebpackPlugin ( {
    rel : 'preload' ,
    include : 'asyncChunks'
  } )
]

對於一個生成兩個具有動態生成名稱的異步腳本的項目，例如chunk.31132ae6680e598f8879.js chunk.d15e7fdfc91b34bb78c4.js ，將向文檔注入以下<head> 。

 < link rel =" preload " as =" script " href =" chunk.31132ae6680e598f8879.js " >
< link rel =" preload " as =" script " href =" chunk.d15e7fdfc91b34bb78c4.js " >

您還可以使用include: 'allChunks'或僅預加載初始塊，其中include: 'initial' 。

在WebPack中，使用加載程序（例如file-loader為特定類型（例如字體或圖像）生成資產非常普遍。如果您也想預加載這些文件，即使它們不屬於塊，也可以使用include: 'allAssets' 。

plugins: [
  new HtmlWebpackPlugin ( ) ,
  new PreloadWebpackPlugin ( {
    rel : 'preload' ,
    include : 'allChunks' // or 'initial', or 'allAssets'
  } )
]

如果您使用命名塊，則可以通過傳遞數組明確指定include哪些：

plugins: [
  new HtmlWebpackPlugin ( ) ,
  new PreloadWebpackPlugin ( {
    rel : 'preload' ,
    include : [ 'home' ]
  } )
]

將僅注入以下方式：

 < link rel =" preload " as =" script " href =" home.31132ae6680e598f8879.js " >

過濾塊

可能有一些您不想預加載的塊（例如，Sourcemaps）。在預加載每個塊之前，此插件會檢查文件是否與fileBlacklist選項中的任何正則匹配。該黑名單的默認值為[/.map/] ，這意味著不會預加載源代碼。您可以輕鬆地覆蓋以下內容：

 new PreloadWebpackPlugin ( {
  fileBlacklist : [ / .whatever / ]
} )

傳遞自己的數組將覆蓋默認值，因此，如果要繼續過濾Sourcemaps以及您自己的自定義設置，則需要在Sourcemaps中包含REGEX：

 new PreloadWebpackPlugin ( {
  fileBlacklist : [ / .map / , / .whatever / ]
} )

過濾HTML

您可能不想在某些HTML文件中預加載資源。您可以使用excludeHtmlNames告訴該插件以忽略一個或多個文件。

 plugins : [
  new HtmlWebpackPlugin ( {
    filename : 'index.html' ,
    template : 'src/index.html' ,
    chunks : [ 'main' ]
  } ) ,
  new HtmlWebpackPlugin ( {
    filename : 'example.html' ,
    template : 'src/example.html' ,
    chunks : [ 'exampleEntry' ]
  } ) ,
  // Only apply the plugin to index.html, not example.html.
  new PreloadWebpackPlugin ( {
    excludeHtmlNames : [ 'example.html' ] ,
  } )

資源提示

如果您希望使用資源提示（例如prefetch ）而不是preload ，則此插件還支持將其接線。

預取：

plugins: [
  new HtmlWebpackPlugin ( ) ,
  new PreloadWebpackPlugin ( {
    rel : 'prefetch'
  } )
]

對於前面提到的異步塊，該插件將使您的HTML更新為以下內容：

 < link rel =" prefetch " href =" chunk.31132ae6680e598f8879.js " >
< link rel =" prefetch " href =" chunk.d15e7fdfc91b34bb78c4.js " >

包括媒體

<link>元素有能力接受媒體屬性。這些可以接受媒體類型或成熟的媒體查詢，從而使您可以進行響應的預加載。

您可以在media選項中傳遞媒體屬性的值：

plugins: [
  new HtmlWebpackPlugin ( ) ,
  new PreloadWebpackPlugin ( {
    rel : 'preload' ,
    media : '(min-width: 600px)'
  } )
]

支持

如果您發現錯誤或遇到問題，請提出問題。

鼓勵補丁，可以通過派生該項目並通過Github提交拉動請求來提交補丁。

貢獻工作流程

src/index.js和src/lib/包含插件的主要來源。 test/包含測試。

測試插件：

$ npm install
$ npm run test

該項目用ES2015編寫，並轉化為支持節點6及以上。

附加說明

請注意不要preload資源用戶不太可能需要。這可能會浪費他們的帶寬。
如果您認為用戶可能會訪問下一頁，請在當前會話中使用preload 。沒有100％的保證預裝項目最終會進入HTTP緩存，並在本次會議之後的本地閱讀。
如果為將來的會話進行優化，請使用prefetch preconnect 。預取的資源在HTTP緩存中保持至少5分鐘（在Chrome中），而不管資源的可緩存性如何。

替代工具

WebPack的本機支持：從v4.6.0發布WebPack的v4.6.0發行版，本機支持可以通過您的import()語句中的“魔術”評論來生成預取和預緊<link> 。
script-ext-ext-html-webpack-plugin：增強html-webpack-plugin的選項，包括“ async”，“ defer”，“ Module”和“ PRELOAD”。從v1.7.0開始，它支持異步塊。
Resource Hints-Webpack-Plugin：自動為您的資源提示。該插件確實不支持異步塊。