目标
希望能在html文件里用prefetch预先下载资源，提升下一页的性能。
前言
<link rel="prefetch" href="XXX"></link>
- 平时用到vue-cli构建项目时，脚手架会将当前的资源放到
<head>标签里用preload去提前下载。而这次我希望页面能提前下载下一页的资源，提升下一页的性能。 - prefetch将会在浏览器空闲时间下载资源，且不阻塞页面渲染。
配置
-
功能
名称叫injectHtmlPlugin，可以接收ManifestPlugin插件生成的对象，然后预加载里面的资源。 -
编写思路
在html模板里写上here占个位置，然后用replace替换这一段。 -
webpack.config.js
html-webpack-plugin的插件在plugin里要写在他后面。
const manifest = require('./dist/manifest.json');
plugins: [
new ManifestPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
}),
new injectHtmlPlugin(manifest),
],
-
插件代码
写插件的方式发生了挺大改动的，html-webpack-plugin文档在此
const HtmlWebpackPlugin = require('html-webpack-plugin');
class injectHtmlPlugin {
constructor(options) {
this.insertInfo = options;
}
apply(compiler) {
const insertInfo = this.insertInfo;
compiler.hooks.compilation.tap('injectHtmlPlugin', (compilation) => {
HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync('injectHtmlPlugin', (htmlPluginData, cb) => {
// Manipulate the content
var str = '';
for (let key in insertInfo) {
str += `<link rel="prefetch" href="${insertInfo[key]}" ></link>`;
}
var temp = htmlPluginData.html;
temp = temp.replace(/<!--here-->/, str);
htmlPluginData.html = temp;
// Tell webpack to move on
cb(null, htmlPluginData);
});
});
}
}
module.exports = injectHtmlPlugin;
- html模板
<!DOCTYPE html>
<html>
<head>
<title>dear webpack</title>
here
</head>
<body>
hi
</body>
</html>
效果
网友评论