jantimon / resource-hints-webpack-plugin Goto Github PK
View Code? Open in Web Editor NEWAdds automatically resource hints to your html-files
Home Page: https://www.w3.org/TR/resource-hints/
License: MIT License
Adds automatically resource hints to your html-files
Home Page: https://www.w3.org/TR/resource-hints/
License: MIT License
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 :)
See here: https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/#loading-of-late-discovered-resources
If the as
attribute is omitted from the preload, it has lower priority or isn't even used at all (Chrome shows: was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.
Though not released yet, html-webpack-plugin 4.0.0 beta is helpful for dealing with some performance issues.
resource-hints-webpack-plugin
silently does nothing when 4.0.0 beta is in use.
It looks like something like https://github.com/GoogleChromeLabs/preload-webpack-plugin/blob/d007cf61e575f20670d615f0cea3dc59213d2c14/src/index.js#L113-L119 is necessary to make it work.
Hey, I have the following use case, that I can't seem to get to work with your plugin:
prefetch
link on Page A for bundle Z since I'm going to need that on Page BI have tried just using bundle names in the prefetch array, but that just adds a text string 'Z'.
Is this possible?
Hi, how can I use all settings but without js files?
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.
In my CSS, I have @import url(...)
to pull down fonts from Google Fonts. Is it possible to use this plugin to generate prefetch links for these ?
<link rel="preload">
must have an as="script"
attribute for scripts
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>
Am I missing reading the devtools or is there a larger issue here?
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
How can I include s to preload font files?
Where should the files be imported to make the plugin aware of their existence and include them in the <head>
?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.