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 -Dbefore:
<!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 |
Include corresponds to an array containing the chunk names that you want to prefetch or preload.
If you use import for asynchronous loading, the corresponding chunk name is login
const Login = () => import(/* webpackChunkName: "login" */'@/components/Login') const HtmlPrefetchWebpackPlugin = require('html-prefetch-webpack-plugin') plugins:[ new htmlWwebpackPlugin(), + new HtmlPrefetchWebpackPlugin({ + rel:'prefetch', + include:['login'] + }) ]If you use Optimization to do code segmentation optimization
{ optimization: { splitChunks: { cacheGroups: { zstdCodec: { test: /[\\/]node_modules[\\/](wangeditor)[\\/]/, name: 'wang-editor', chunks: 'async', priority: 20, }, }, }, } } const HtmlPrefetchWebpackPlugin = require('html-prefetch-webpack-plugin') plugins:[ new htmlWwebpackPlugin(), + new HtmlPrefetchWebpackPlugin({ + rel:'prefetch', + include:['wang-editor'] + }) ]