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：自动为您的资源提示。该插件确实不支持异步块。