❤
npm
Sign UpSign In

html-prefetch-css-webpack-plugin

0.1.3 • Public • Published 

  npm i --save-dev html-prefetch-css-webpack-plugin

This 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>

Readme

Keywords

Package Sidebar

Install

npm i html-prefetch-css-webpack-plugin

Repository

github.com/MarvelSQ/html-prefetch-css-webpack-plugin

Homepage

github.com/MarvelSQ/html-prefetch-css-webpack-plugin#readme

Weekly Downloads

9

Version

0.1.3

License

MIT

Unpacked Size

20.1 kB

Total Files

10

Last publish

Collaborators

  • q.sun
Try on RunKit
Report malware