html-prefetch-webpack-plugin
Advanced tools
If you want to load some large resources during the browser's idle time, you can use this plugin. Prefetch works for non-first screen loading; Preload applies to the first screen loading
如果你想在浏览器空闲时段加载一些较大的资源，那么你可以使用此插件，prefetch适用于非首屏加载；preload适用于首屏加载
npm i html-prefetch-webpack-plugin -D
# or
yarn add html-prefetch-webpack-plugin -D
before:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script defer="defer" src="./main.025b57ab4efabca2e393.js"></script>
</head>
<body></body>
</html>
after:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script defer="defer" src="./main.025b57ab4efabca2e393.js"></script>
+ <link as="script" href="./big-file.e4cd65aaa70ad26eba0d.js" rel="prefetch">
</head>
<body></body>
</html>
const HtmlPrefetchWebpackPlugin = require('html-prefetch-webpack-plugin')
plugins:[
new htmlWwebpackPlugin(),
+ new HtmlPrefetchWebpackPlugin({
+ rel:'prefetch',
+ include:['big-file']
+ })
]
| key（键） | value（值） | Default（默认值） | Description（备注） |
|---|---|---|---|
| rel | 'prefetch' or 'preload' | null | Specify the type |
| include | string[] | null | Chunk file names that need to be preread and preloaded |
FAQs
The npm package html-prefetch-webpack-plugin receives a total of 2 weekly downloads. As such, html-prefetch-webpack-plugin popularity was classified as not popular.
We found that html-prefetch-webpack-plugin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.