Skip to content

MarvelSQ/html-prefetch-css-webpack-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

HTML-Prefetch-Css-Webpack-Plugin

Install

  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>

Usage

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>

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published