ryan/squoosh
1
0
Fork 0
forked from external-repos/squoosh
Code Pull Requests Activity

Add option to make async leave a rel="preload" in the header and append a <link rel="stylesheet"> to the end of body.

Browse Source
This commit is contained in:
Jason Miller
2018-04-05 12:41:19 -04:00
parent 387f4cf9a3
commit 919a259b0a
2 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
config/critters-webpack-plugin.js
View File

@@ -20,7 +20,8 @@ const PARSE5_OPTS = {
* @class
* @param {Object} options
* @param {Boolean} [options.external=true] Fetch and inline critical styles from external stylesheets
* @param {Boolean} [options.async=false] Convert critical-inlined external stylesheets to load asynchronously (via link rel="preload")
* @param {Boolean} [options.async=false] Convert critical-inlined external stylesheets to load asynchronously (via link rel="preload" - see https://filamentgroup.com/lab/async-css.html)
* @param {Boolean} [options.preload=false] (requires `async` option) Append a new <link rel="stylesheet"> into <body> instead of swapping the preload's rel attribute
* @param {Boolean} [options.compress=true] Compress resulting critical CSS
*/
module.exports = class CrittersWebpackPlugin {
@@ -99,7 +100,14 @@ module.exports = class CrittersWebpackPlugin {
if (this.options.async) {
link.setAttribute('rel', 'preload');
link.setAttribute('as', 'style');
link.setAttribute('onload', "this.rel='stylesheet'");
if (this.options.preload) {
const bodyLink = document.createElement('link');
bodyLink.setAttribute('rel', 'stylesheet');
bodyLink.setAttribute('href', href);
document.body.appendChild(bodyLink);
} else {
link.setAttribute('onload', "this.rel='stylesheet'");
}
}
});
}

6
webpack.config.js
View File

@@ -177,8 +177,10 @@ module.exports = function(_, env) {
isProd && new PreloadWebpackPlugin(),
isProd && new CrittersPlugin({
// convert critical'd <link rel="stylesheet"> to <link rel="preload" as="style" onload="this.rel='stylesheet'">
async: true
// convert critical'd <link rel="stylesheet"> to <link rel="preload" as="style">:
async: true,
// copy original <link rel="stylesheet"> to the end of <body>:
preload: true
}),
// Inline constants during build, so they can be folded by UglifyJS.