npm i --save-dev html-prefetch-css-webpack-pluginThis is a webpack plugin, work with html-webpack-plugin. inject prefetch link to html head;
while use code spilting in webpack, we can use magic comment to mark module that we want to prefetch;
like this
/* webpackPrefetch: true */but the split css file won't be prefetched;
before load
<head>
...
<link rel="prefetch" href="example.js">
...
</head>after loaded
<head>
...
<link rel="prefetch" href="example.js">
<link rel="stylesheet" type="text/css" href="example.css">
<script charset="utf-8" src="example.js"></script>
...
</head>although the js file be prefetched, css file still need to wait;
to solve this problem, we can use 'style-loader' to integrate css to js file;
webpack.config.js
module.exports = {
...
module: {
rules: [
{
test: /css$/,
loaders: ['style-loader','css-loader']
}
]
}
...
}else use this plugin
before load
<head>
...
<link rel="prefetch" href="example.css">
<link rel="prefetch" href="example.js">
...
</head>index.js
const button = document.createElement("button");
button.innerText = "lazy load btn";
button.addEventListener("click", () => {
// use magic comments to mark module need be prefetch
// webpack 4.6.0+ support
import(/* webpackChunkName: "lazy" */ /* webpackPrefetch: true */ "./lazy.js").then(
module => {
document.body.appendChild(module.default("<h2>Lazy load Content</h2>"));
}
);
});
document.body.appendChild(button);lazy.js
import "./lazy.css";
export default content => {
const lazy = document.createElement("div");
lazy.classList.add("lizy");
lazy.innerHTML = content;
return lazy;
};lazy.css
.lazy {
font-size: 20px;
color: red;
}webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCSSExtractPlugin = require("mini-css-extract-plugin");
const PrefetchCssWebpackPlugin = require("html-prefetch-css-webpack-plugin");
module.export = {
entry: "index.js",
output: {
path: __dirname + "/dist",
filename: "index.bundle.js"
},
module: {
rules: [
{
test: /\.css$/,
use: [MiniCSSExtractPlugin.loader, "css-loader"]
}
]
},
plugins: [
new HtmlWebpackPlugin(),
new PrefetchCssWebpackPlugin(),
new MiniCSSExtractPlugin("[name].css")
]
};the generated html file would be
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
<link rel="prefetch" href="lazy.css">
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>