html-webpack-import-css-plugin

Transform LINK tag to STYLE tag with import directive.

Origin:

<link rel="stylesheet" href="/main.css" />

Output:

<style type="text/css">@import url("/main.css");</style> 

Reasons

Chrome stores stylesheets from LINK tag to disk cache, that causes latency about 300-400 ms to load the cache. This approach allows to avoid the behavior and force Chrome storing stylesheets to memory cache. It results as 0 ms to load cache.

Requirements

• html-webpack-plugin
• webpack 3/4 (compatible)

Installation

NPM

npm install html-webpack-import-css-plugin -D

Yarn

yarn add html-webpack-import-css-plugin -D

How to use

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackImportCssPlugin = require("html-webpack-import-css-plugin");
 
module.exports = {
  plugins: [
    new HtmlWebpackPlugin(),
    new HtmlWebpackImportCssPlugin(),
  ]
}