Gathering detailed insights and metrics for preload-webpack-plugin
Gathering detailed insights and metrics for preload-webpack-plugin
Please use https://github.com/vuejs/preload-webpack-plugin instead.
Installations
npm install preload-webpack-pluginDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
8.9.1
NPM Version
5.6.0
Releases
13
Languages
1
JavaScript
JavaScript (100%)
Developer
googlechromelabs
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
Apache-2.0 License
2,154 Stars
166 Commits
145 Forks
36 Watchers
13 Branches
28 Contributors
Updated on May 16, 2025
Maintainers
1
Package Meta Information
Latest Version
2.3.0
Package Id
preload-webpack-plugin@2.3.0
Size
10.27 kB
NPM Version
5.6.0
Node Version
8.9.1
Published on
Mar 01, 2018
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Peer Dependencies
1
preload-webpack-plugin
A Webpack plugin for automatically wiring up asynchronous (and other types) of JavaScript
chunks using <link rel='preload'>. This helps with lazy-loading.
Note: This is an extension plugin for html-webpack-plugin - a plugin that simplifies the creation of HTML files to serve your webpack bundles.
This plugin is a stop-gap until we add support for asynchronous chunk wiring to script-ext-html-webpack-plugin.
Introduction
Preload is a web standard aimed at improving performance and granular loading of resources. It is a declarative fetch that can tell a browser to start fetching a source because a developer knows the resource will be needed soon. Preload: What is it good for? is a recommended read if you haven't used the feature before.
In simple web apps, it's straight-forward to specify static paths to scripts you would like to preload - especially if their names or locations are unlikely to change. In more complex apps, JavaScript can be split into "chunks" (that represent routes or components) at with dynamic names. These names can include hashes, numbers and other properties that can change with each build.
For example, chunk.31132ae6680e598f8879.js.
To make it easier to wire up async chunks for lazy-loading, this plugin offers a drop-in way to wire them up
using <link rel='preload'>.
Pre-requisites
This module requires Webpack 2.2.0 and above. It also requires that you're using html-webpack-plugin in your Webpack project.
Installation
First, install the package as a dependency in your package.json:
1$ npm install --save-dev preload-webpack-plugin
Alternatively, using yarn:
1yarn add -D preload-webpack-plugin
Usage
Next, in your Webpack config, require() the preload plugin as follows:
1const PreloadWebpackPlugin = require('preload-webpack-plugin');
and finally, configure the plugin in your Webpack plugins array after HtmlWebpackPlugin:
1plugins: [ 2 new HtmlWebpackPlugin(), 3 new PreloadWebpackPlugin() 4]
When preloading files, the plugin will use different as attribute depends on the type of each
file. For each file ends with .css, the plugin will preload it with as=style, for each file ends
with .woff2, the plugin will preload it with as=font, while for all other files, as=script
will be used.
If you do not prefer to determine as attribute depends on suffix of filename, you can also
explicitly name it using as:
1plugins: [ 2 new HtmlWebpackPlugin(), 3 new PreloadWebpackPlugin({ 4 rel: 'preload', 5 as: 'script' 6 }) 7]
In case you need more fine-grained control of the as atribute, you could also provide a function here.
When using it, entry name will be provided as the parameter, and function itself should return a
string for as attribute:
1plugins: [ 2 new HtmlWebpackPlugin(), 3 new PreloadWebpackPlugin({ 4 rel: 'preload', 5 as(entry) { 6 if (/\.css$/.test(entry)) return 'style'; 7 if (/\.woff$/.test(entry)) return 'font'; 8 if (/\.png$/.test(entry)) return 'image'; 9 return 'script'; 10 } 11 }) 12]
Notice that if as=font is used in preload, crossorigin will be added, otherwise the font resource
might be double fetched. Explains can be found in this article.
By default, the plugin will assume async script chunks will be preloaded. This is the equivalent of:
1plugins: [ 2 new HtmlWebpackPlugin(), 3 new PreloadWebpackPlugin({ 4 rel: 'preload', 5 include: 'asyncChunks' 6 }) 7]
For a project generating two async scripts with dynamically generated names, such as
chunk.31132ae6680e598f8879.js and chunk.d15e7fdfc91b34bb78c4.js, the following preloads
will be injected into the document <head>:
1<link rel="preload" as="script" href="chunk.31132ae6680e598f8879.js"> 2<link rel="preload" as="script" href="chunk.d15e7fdfc91b34bb78c4.js">
You can also configure the plugin to preload all chunks (vendor, async, normal chunks) using include: 'allChunks', or only preload initial chunks with include: 'initial':
1plugins: [ 2 new HtmlWebpackPlugin(), 3 new PreloadWebpackPlugin({ 4 rel: 'preload', 5 include: 'allChunks' // or 'initial' 6 }) 7]
In case you work with named chunks, you can explicitly specify which ones to include by passing an array:
1plugins: [ 2 new HtmlWebpackPlugin(), 3 new PreloadWebpackPlugin({ 4 rel: 'preload', 5 include: ['home'] 6 }) 7]
will inject just this:
1<link rel="preload" as="script" href="home.31132ae6680e598f8879.js">
It is very common in Webpack to use loaders such as file-loader to generate assets for specific
types, such as fonts or images. If you wish to preload these files as well, you can use include
with value allAssets:
1plugins: [ 2 new HtmlWebpackPlugin(), 3 new PreloadWebpackPlugin({ 4 rel: 'preload', 5 include: 'allAssets', 6 }) 7]
One thing worth noticing: file-loader provides an option to specify publicPath just for assets.
However, that information seems to be lost when this plugin is doing its job. Thus, this plugin
will use publicPath defined in output config. It could be an issue, if publicPath in file-loader
and publicPath in webpack config have different values.
Usually you don't want to preload all of them but only keep the necessary resources, you can use
fileBlacklist or fileWhitelist shown below to filter.
Filtering chunks
There may be chunks that you don't want to have preloaded (sourcemaps, for example). Before preloading each chunk, this plugin checks that the file does not match any regex in the fileBlacklist option. The default value of this blacklist is [/\.map/], meaning no sourcemaps will be preloaded. You can easily override this:
1new PreloadWebpackPlugin({ 2 fileBlacklist: [/\.whatever/] 3})
Passing your own array will override the default, so if you want to continue filtering sourcemaps along with your own custom settings, you'll need to include the regex for sourcemaps:
1new PreloadWebpackPlugin({ 2 fileBlacklist: [/\.map/, /\.whatever/] 3})
If you use include="allAssets", you might find excluding all unnecessary files one by one a
bit annoying. In this case, you can use fileWhitelist to only include the files you want:
1new PreloadWebpackPlugin({ 2 fileWhitelist: [/\.files/, /\.to/, /\.include/], 3})
notice that if fileWhitelist is not provided, it will not filter any file out.
Also, you could use fileWhitelist and fileBlacklist together:
1new PreloadWebpackPlugin({ 2 fileWhitelist: [/\.files/, /\.to/, /\.include/], 3 fileBlacklist: [/\.files/, /\.to/, /\.exclude/], 4})
In example above, only files with name matches /\.include/ will be included.
Filtering HTML
In some case, you may don't want to preload resource on some file. But using fileBlacklist is weird, because you may want to inlcude this chunk on another file. So you can use excludeHtmlNames to tell preload plugin to ignore this file.
If you have multiple html like index.html and example.html, you can exclude index.html like this.
1plugins: [ 2 new HtmlWebpackPlugin({ 3 filename: 'index.html', 4 template: 'src/index.html', 5 chunks: ['main'] 6 }), 7 new HtmlWebpackPlugin({ 8 filename: 'example.html', 9 template: 'src/example.html', 10 chunks: ['exampleEntry'] 11 }), 12 // I want this to affect only index.html 13 new PreloadWebpackPlugin({ 14 excludeHtmlNames: ['index.html'], 15 })
Resource Hints
Should you wish to use Resource Hints (such as prefetch) instead of preload, this plugin also supports wiring those up.
Prefetch:
1plugins: [ 2 new HtmlWebpackPlugin(), 3 new PreloadWebpackPlugin({ 4 rel: 'prefetch' 5 }) 6]
For the async chunks mentioned earlier, the plugin would update your HTML to the following:
1<link rel="prefetch" href="chunk.31132ae6680e598f8879.js"> 2<link rel="prefetch" href="chunk.d15e7fdfc91b34bb78c4.js">
Demo
A demo application implementing the PRPL pattern with React that uses this plugin can be found in the demo
directory.
Support
If you've found an error in this sample, please file an issue: https://github.com/googlechrome/preload-webpack-plugin/issues
Patches are encouraged, and may be submitted by forking this project and submitting a pull request through GitHub.
Contributing workflow
index.js contains the primary source for the plugin, test contains tests and demo contains demo code.
Test the plugin:
1$ npm install 2$ npm run test
Lint the plugin:
1$ npm run lint 2$ npm run lint-fix # fix linting issues
The project is written in ES2015, but does not use a build-step. This may change depending on any Node version support requests posted to the issue tracker.
Additional Notes
- Be careful not to
preloadresources a user is unlikely to need. This can waste their bandwidth. - Use
preloadfor the current session if you think a user is likely to visit the next page. There is no 100% guarantee preloaded items will end up in the HTTP Cache and read locally beyond this session. - If optimising for future sessions, use
prefetchandpreconnect. Prefetched resources are maintained in the HTTP Cache for at least 5 minutes (in Chrome) regardless of the resource's cachability.
Related plugins
- script-ext-html-webpack-plugin - Enhances html-webpack-plugin with options including 'async', 'defer', 'module' and preload (no async chunk support yet)
- resource-hints-webpack-plugin - Automatically wires resource hints for your resources (similarly no async chunk support)
License
Copyright 2017 Google, Inc.
Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
No vulnerabilities found.
Reason
no vulnerabilities detected
Reason
no dangerous workflow patterns detected
Reason
tokens are read-only in GitHub workflows
Reason
license file detected
Details
- Info: : LICENSE:1
Reason
all dependencies are pinned
Details
- Info: GitHub-owned GitHubActions are pinned
- Info: Third-party GitHubActions are pinned
- Info: Dockerfile dependencies are pinned
- Info: no insecure (not pinned by hash) dependency downloads found in Dockerfiles
- Info: no insecure (not pinned by hash) dependency downloads found in shell scripts
Reason
no binaries found in the repo
Reason
GitHub code reviews found for 4 commits out of the last 30 -- score normalized to 1
Details
- Warn: no reviews found for commit: d55548cb25a385c0318ca526200877b062ab6e76
- Warn: no reviews found for commit: e4f4f68490cbf3e22b272f151e9e9417843207b8
- Warn: no reviews found for commit: 082beca970b669414c525ad1a177d82fc2956b78
- Warn: no reviews found for commit: 81e83a27ecc73a215dc816c316256b7a8b5fdd1a
- Warn: no reviews found for commit: 6ca6ccd2daea5deccd1f12b1100de3eefa0e76a3
- Warn: no reviews found for commit: fa21468e74cf1632e73900b2d7b1e5ae4e052be2
- Warn: no reviews found for commit: 52a3595dcc9e816aa01e3e559d67eb052fa37ef5
- Warn: no reviews found for commit: d007cf61e575f20670d615f0cea3dc59213d2c14
- Warn: no reviews found for commit: 8bda4adb52e37f1478d04aa9a31036392320c276
- Warn: no reviews found for commit: 89c8d42ad9d1cc45263b8e46eea09f0a27ca03da
- Warn: no reviews found for commit: a7f97bca6e9b4ab000e9986e7da7f6ded56228f3
- Warn: no reviews found for commit: 680620f84b4bde3bf5f3694dde873d795df8380d
- Warn: no reviews found for commit: c57b0b3521ca31091e0a77784bdb56a8ae8ba98d
- Warn: no reviews found for commit: 7430a47e887e259029fc151a8f752e9b73591505
- Warn: no reviews found for commit: 72ce0f0abfcf49f4e49a8b8e3b730f74ca1555c5
- Warn: no reviews found for commit: 8e1ff45f41c77061f076025ee1b6c674c29b2216
- Warn: no reviews found for commit: 678aae5c0d7a8c928a5f8c8028fa1dc27c0f6d4e
- Warn: no reviews found for commit: e58a8379bd9d4c3528ee357c1c77489782d5793f
- Warn: no reviews found for commit: d80459ad5941e0535c68dd27708590ceafee34ab
- Warn: no reviews found for commit: b1f8ec65d655dfa064fad73765c6c552dc089a38
- Warn: no reviews found for commit: 3c02dde8384e281be283b96595a74a2972acdda9
- Warn: no reviews found for commit: 6317aab0f03f2bb4258e5a3fa7eb849e1fb55762
- Warn: no reviews found for commit: 05cdffc987f3b130be4fb5680a423f00f19fb131
- Warn: no reviews found for commit: 23834d79cf699911a1678c0a58bdf6dc9e7f4e5c
- Warn: no reviews found for commit: 5daaa8e2bbe0f0bb2e5f0e0ef6eae2c1ce8e5837
- Warn: no reviews found for commit: b6c75533a67ea5c7f25162ab365bf01ed53dab3c
Reason
repo is marked as archived
Reason
no badge detected
Reason
security policy file not detected
Reason
no update tool detected
Details
- Warn: dependabot config file not detected in source location. We recommend setting this configuration in code so it can be easily verified by others.
- Warn: renovatebot config file not detected in source location. We recommend setting this configuration in code so it can be easily verified by others.
Reason
project is not fuzzed
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
- Warn: branch protection not enabled for branch 'v3'
Score
4.9
/10
Last Scanned on 2022-08-15
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More