Code Monkey home page Code Monkey logo

resource-hints-webpack-plugin's Introduction

Resource Hints Webpack Plugin

npm version Dependency Status Build status js-semistandard-style

This is an extension plugin for the webpack plugin html-webpack-plugin.

It adds automatically resource-hints to your html files to improve your load time.

Installation

You must be running webpack on node 0.12.x or higher

Install the plugin with npm:

$ npm install --save-dev resource-hints-webpack-plugin

Install the plugin with yarn:

$ yarn add --dev resource-hints-webpack-plugin

Basic Usage

Load the plugin

  const ResourceHintWebpackPlugin = require('resource-hints-webpack-plugin');

and add it to your webpack config as follows:

plugins: [
  new HtmlWebpackPlugin(),
  new ResourceHintWebpackPlugin()
]  

The above configuration will actually do the same as the following:

plugins: [
  new HtmlWebpackPlugin({
    prefetch: ['**/*.*'],
    preload: ['**/*.*']
  }),
  new ResourceHintWebpackPlugin()
]  

Even if you generate multiple files make sure that you add the ResourceHintWebpackPlugin only once:

plugins: [
  new HtmlWebpackPlugin({
    prefetch: ['*.js', 'data.json'],
    preload: '*.*'
  }),
  new HtmlWebpackPlugin({
    preload: ['*.json'],
    preload: false,
    filename: 'demo.html'
  }),
  new ResourceHintWebpackPlugin()
]  

resource-hints-webpack-plugin's People

Contributors

jantimon avatar ninetails avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

resource-hints-webpack-plugin's Issues

*.* default as filter excludes files in target folder

Great addition to a webpack build pipeline! Works great. I especially like the way the HTMLPlugin is used to carry per file prefetch/preload options.

Two remarks:

Using *.* as default excludes files inside of e.g /dist folders. minimatch uses globbing so maybe it should default to '**/*.js' or similar. Or at least that might be mentioned in the README.

The name of the project might be better served having webpack in it. It seems to be a convention for many webpack plugins :)

Files appear to be downloading 3 times

I tested out this plugin, and while correctly adding the preload and prefetch tags. It appear chrome to downloads the js files 3 times. Firefox seems to behave correctly.

<!doctype html>
<html lang="en">
  <head>
    <title>Test</title>
  <link href="/static/css/app.3c75a6a8.css" rel="stylesheet">
<link rel="preload" href="/static/js/polyfills.382d9fa6.js" as="script">
<link rel="preload" href="/static/js/manifest.e30477b9.js" as="script">
<link rel="preload" href="/static/js/react.b0cee175.js" as="script">
<link rel="preload" href="/static/js/vendor.34fa1a66.js" as="script">
<link rel="preload" href="/static/js/app.34f71aed.js" as="script">
<link rel="prefetch" href="/static/js/polyfills.382d9fa6.js">
<link rel="prefetch" href="/static/js/manifest.e30477b9.js">
<link rel="prefetch" href="/static/js/react.b0cee175.js">
<link rel="prefetch" href="/static/js/vendor.34fa1a66.js">
<link rel="prefetch" href="/static/js/app.34f71aed.js"></head>
  <body>
    <div id="root"></div>
    <script type="text/javascript" src="/static/js/polyfills.382d9fa6.js"></script>
    <script type="text/javascript" src="/static/js/manifest.e30477b9.js"></script>
    <script type="text/javascript" src="/static/js/react.b0cee175.js"></script> 
    <script type="text/javascript" src="/static/js/vendor.34fa1a66.js"></script>
    <script type="text/javascript" src="/static/js/app.34f71aed.js"></script>
</body>
</html>

Chrome (v55):
image

Firefox (v52):
image

Am I missing reading the devtools or is there a larger issue here?

Prefetch other bundles

Hey, I have the following use case, that I can't seem to get to work with your plugin:

  • I have Page A with bundle/chunk X and Y
  • I want to add a prefetch link on Page A for bundle Z since I'm going to need that on Page B

I have tried just using bundle names in the prefetch array, but that just adds a text string 'Z'.

Is this possible?

It is not support webpack 4

This package might be upgrade to support webpack 4.
I have this error message.

ERROR in   TypeError: callback is not a function

  - index.js:89
    [blog-website]/[resource-hints-webpack-plugin]/index.js:89:7


  - new Promise


  - Hook.js:35 AsyncSeriesWaterfallHook.lazyCompileHook [as _promise]
    [blog-website]/[tapable]/lib/Hook.js:35:21

  - index.js:627
    [blog-website]/[html-webpack-plugin]/index.js:627:47

  - index.js:166 Promise.resolve.then.then.then.then.then.then.then.result
    [blog-website]/[html-webpack-plugin]/index.js:166:18

Prefetch/preload any Webpack asset instead of HTMLWebpackPlugin tags

Right now the plugin will only add prefetch/preload <link> for assets, that already have a tag somewhere else in the document (where the tag was generated by HTMLWebpackPlugin).

For my usecase I'd like to be able to prefetch assets that are loaded using Webpack's file-loader. My application is loading an image and a font using file-loader and referencing the files dynamically in the bundle. The paths to the assets don't appear in the HTML template, but do appear in the bundle. Right now they are just not picked up by this plugin.

I'd like to be able to apply the filters (e.g img/*.png) here, so that prefetch links for the images are added to the template. This seems to echo what @chrisui's mentions in his comment.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.