external-repos/squoosh
1
0
Fork 1
mirror of https://github.com/GoogleChromeLabs/squoosh.git synced 2025-11-12 00:37:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Critters: move to async/await (fixes #16), add critical font inlining / preloading

Browse Source
This commit is contained in:
Jason Miller
2018-04-17 13:57:48 -04:00
parent 919a259b0a
commit be8fae10f8
3 changed files with 184 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,9 @@
const fs = require('fs');
const { promisify } = require('util');
const path = require('path'); const path = require('path');
const parse5 = require('parse5'); const parse5 = require('parse5');
const nwmatcher = require('nwmatcher'); const nwmatcher = require('nwmatcher');
const css = require('css'); const css = require('css');
const prettyBytes = require('pretty-bytes'); const prettyBytes = require('pretty-bytes');
const readFile = promisify(fs.readFile);
const treeAdapter = parse5.treeAdapters.htmlparser2; const treeAdapter = parse5.treeAdapters.htmlparser2;
const PLUGIN_NAME = 'critters-webpack-plugin'; const PLUGIN_NAME = 'critters-webpack-plugin';
@@ -22,6 +18,9 @@ const PARSE5_OPTS = {
* @param {Boolean} [options.external=true] Fetch and inline critical styles from external stylesheets * @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" - see https://filamentgroup.com/lab/async-css.html) * @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.preload=false] (requires `async` option) Append a new <link rel="stylesheet"> into <body> instead of swapping the preload's rel attribute
* @param {Boolean} [options.fonts] If `true`, keeps critical `@font-face` rules and preloads them. If `false`, removes the rules and does not preload the fonts
* @param {Boolean} [options.preloadFonts=false] Preloads critical fonts (even those removed by `{fonts:false}`)
* @param {Boolean} [options.removeFonts=false] Remove all fonts (even critical ones)
* @param {Boolean} [options.compress=true] Compress resulting critical CSS * @param {Boolean} [options.compress=true] Compress resulting critical CSS
*/ */
module.exports = class CrittersWebpackPlugin { module.exports = class CrittersWebpackPlugin {
@@ -35,44 +34,54 @@ module.exports = class CrittersWebpackPlugin {
/** Invoked by Webpack during plugin initialization */ /** Invoked by Webpack during plugin initialization */
apply (compiler) { apply (compiler) {
const outputPath = compiler.options.output.path;
// hook into the compiler to get a Compilation instance... // hook into the compiler to get a Compilation instance...
compiler.hooks.compilation.tap(PLUGIN_NAME, compilation => { compiler.hooks.compilation.tap(PLUGIN_NAME, compilation => {
// ... which is how we get an "after" hook into html-webpack-plugin's HTML generation. // ... which is how we get an "after" hook into html-webpack-plugin's HTML generation.
compilation.hooks.htmlWebpackPluginAfterHtmlProcessing.tapAsync(PLUGIN_NAME, (htmlPluginData, callback) => { compilation.hooks.htmlWebpackPluginAfterHtmlProcessing.tapAsync(PLUGIN_NAME, (htmlPluginData, callback) => {
// Parse the generated HTML in a DOM we can mutate this.process(compiler, compilation, htmlPluginData)
const document = parse5.parse(htmlPluginData.html, PARSE5_OPTS); .then(result => { callback(null, result); })
makeDomInteractive(document);
let externalStylesProcessed = Promise.resolve();
// `external:false` skips processing of external sheets
if (this.options.external !== false) {
const externalSheets = document.querySelectorAll('link[rel="stylesheet"]');
externalStylesProcessed = Promise.all(externalSheets.map(
link => this.embedLinkedStylesheet(link, compilation, outputPath)
));
}
externalStylesProcessed
.then(() => {
// go through all the style tags in the document and reduce them to only critical CSS
const styles = document.querySelectorAll('style');
return Promise.all(styles.map(style => this.processStyle(style, document)));
})
.then(() => {
// serialize the document back to HTML and we're done
const html = parse5.serialize(document, PARSE5_OPTS);
callback(null, { html });
})
.catch(callback); .catch(callback);
}); });
}); });
} }
readFile (filename, encoding) {
return new Promise((resolve, reject) => {
this.fs.readFile(filename, encoding, (err, data) => {
if (err) reject(err);
else resolve(data);
});
});
}
async process (compiler, compilation, htmlPluginData) {
const outputPath = compiler.options.output.path;
// Parse the generated HTML in a DOM we can mutate
const document = parse5.parse(htmlPluginData.html, PARSE5_OPTS);
makeDomInteractive(document);
// `external:false` skips processing of external sheets
if (this.options.external !== false) {
const externalSheets = document.querySelectorAll('link[rel="stylesheet"]');
await Promise.all(externalSheets.map(
link => this.embedLinkedStylesheet(link, compilation, outputPath)
));
}
// go through all the style tags in the document and reduce them to only critical CSS
const styles = document.querySelectorAll('style');
await Promise.all(styles.map(
style => this.processStyle(style, document)
));
// serialize the document back to HTML and we're done
const html = parse5.serialize(document, PARSE5_OPTS);
return { html };
}
/** Inline the target stylesheet referred to by a <link rel="stylesheet"> (assuming it passes `options.filter`) */ /** Inline the target stylesheet referred to by a <link rel="stylesheet"> (assuming it passes `options.filter`) */
embedLinkedStylesheet (link, compilation, outputPath) { async embedLinkedStylesheet (link, compilation, outputPath) {
const href = link.getAttribute('href'); const href = link.getAttribute('href');
const document = link.ownerDocument; const document = link.ownerDocument;
@@ -85,9 +94,20 @@ module.exports = class CrittersWebpackPlugin {
// try to find a matching asset by filename in webpack's output (not yet written to disk) // try to find a matching asset by filename in webpack's output (not yet written to disk)
const asset = compilation.assets[path.relative(outputPath, filename).replace(/^\.\//, '')]; const asset = compilation.assets[path.relative(outputPath, filename).replace(/^\.\//, '')];
// wait for a disk read if we had to go to disk // CSS loader is only injected for the first sheet, then this becomes an empty string
const promise = asset ? Promise.resolve(asset.source()) : readFile(filename, 'utf8'); let cssLoaderPreamble = `function $loadcss(u,l){(l=document.createElement('link')).rel='stylesheet';l.href=u;document.head.appendChild(l)}`;
return promise.then(sheet => {
const media = typeof this.options.media === 'string' ? this.options.media : 'all';
// { preload:'js', media:true }
// { preload:'js', media:'print' }
if (this.options.media) {
cssLoaderPreamble = cssLoaderPreamble.replace('l.href', "l.media='only x';l.onload=function(){l.media='" + media + "'};l.href");
}
// Attempt to read from assets, falling back to a disk read
const sheet = asset ? asset.source() : await this.readFile(filename, 'utf8');
// the reduced critical CSS gets injected into a new <style> tag // the reduced critical CSS gets injected into a new <style> tag
const style = document.createElement('style'); const style = document.createElement('style');
style.appendChild(document.createTextNode(sheet)); style.appendChild(document.createTextNode(sheet));
@@ -100,22 +120,33 @@ module.exports = class CrittersWebpackPlugin {
if (this.options.async) { if (this.options.async) {
link.setAttribute('rel', 'preload'); link.setAttribute('rel', 'preload');
link.setAttribute('as', 'style'); link.setAttribute('as', 'style');
if (this.options.preload) { if (this.options.preload === 'js') {
const script = document.createElement('script');
script.appendChild(document.createTextNode(`${cssLoaderPreamble}$loadcss(${JSON.stringify(href)})`));
link.parentNode.insertBefore(script, link.nextSibling);
cssLoaderPreamble = '';
} else if (this.options.preload) {
const bodyLink = document.createElement('link'); const bodyLink = document.createElement('link');
bodyLink.setAttribute('rel', 'stylesheet'); bodyLink.setAttribute('rel', 'stylesheet');
bodyLink.setAttribute('href', href); bodyLink.setAttribute('href', href);
document.body.appendChild(bodyLink); document.body.appendChild(bodyLink);
} else if (this.options.media) {
// @see https://github.com/filamentgroup/loadCSS/blob/af1106cfe0bf70147e22185afa7ead96c01dec48/src/loadCSS.js#L26
link.setAttribute('rel', 'stylesheet');
link.removeAttribute('as');
link.setAttribute('media', 'only x');
link.setAttribute('onload', "this.media='" + media + "'");
} else { } else {
link.setAttribute('onload', "this.rel='stylesheet'"); link.setAttribute('onload', "this.rel='stylesheet'");
} }
} }
});
} }
/** Parse the stylesheet within a <style> element, then reduce it to contain only rules used by the document. */ /** Parse the stylesheet within a <style> element, then reduce it to contain only rules used by the document. */
processStyle (style) { async processStyle (style) {
const done = Promise.resolve(); const options = this.options;
const document = style.ownerDocument; const document = style.ownerDocument;
const head = document.querySelector('head');
// basically `.textContent` // basically `.textContent`
let sheet = style.childNodes.length > 0 && style.childNodes.map(node => node.nodeValue).join('\n'); let sheet = style.childNodes.length > 0 && style.childNodes.map(node => node.nodeValue).join('\n');
@@ -124,10 +155,13 @@ module.exports = class CrittersWebpackPlugin {
const before = sheet; const before = sheet;
// Skip empty stylesheets // Skip empty stylesheets
if (!sheet) return done; if (!sheet) return;
const ast = css.parse(sheet); const ast = css.parse(sheet);
// a string to search for font names (very loose)
let criticalFonts = '';
// Walk all CSS rules, transforming unused rules to comments (which get removed) // Walk all CSS rules, transforming unused rules to comments (which get removed)
visit(ast, rule => { visit(ast, rule => {
if (rule.type === 'rule') { if (rule.type === 'rule') {
@@ -142,15 +176,58 @@ module.exports = class CrittersWebpackPlugin {
if (rule.selectors.length === 0) { if (rule.selectors.length === 0) {
return false; return false;
} }
if (rule.declarations) {
for (let i = 0; i < rule.declarations.length; i++) {
const decl = rule.declarations[i];
if (decl.property.match(/\bfont\b/i)) {
criticalFonts += ' ' + decl.value;
}
}
}
} }
// If there are no remaining rules, remove the whole rule. // keep font rules, they're handled in the second pass:
if (rule.type === 'font-face') return;
// If there are no remaining rules, remove the whole rule:
return !rule.rules || rule.rules.length !== 0; return !rule.rules || rule.rules.length !== 0;
}); });
const preloadedFonts = [];
visit(ast, rule => {
// only process @font-face rules in the second pass
if (rule.type !== 'font-face') return;
let family, src;
for (let i = 0; i < rule.declarations.length; i++) {
const decl = rule.declarations[i];
if (decl.property === 'src') {
// @todo parse this properly and generate multiple preloads with type="font/woff2" etc
src = (decl.value.match(/url\s*\(\s*(['"]?)(.+?)\1\s*\)/) || [])[2];
} else if (decl.property === 'font-family') {
family = decl.value;
}
}
if (src && (options.fonts === true || options.preloadFonts) && preloadedFonts.indexOf(src) === -1) {
preloadedFonts.push(src);
const preload = document.createElement('link');
preload.setAttribute('rel', 'preload');
preload.setAttribute('as', 'font');
if (src.match(/:\/\//)) {
preload.setAttribute('crossorigin', 'anonymous');
}
preload.setAttribute('href', src.trim());
head.appendChild(preload);
}
// if we're missing info or the font is unused, remove the rule:
if (!family || !src || criticalFonts.indexOf(family) === -1 || !options.fonts || options.removeFonts) return false;
});
sheet = css.stringify(ast, { compress: this.options.compress !== false }); sheet = css.stringify(ast, { compress: this.options.compress !== false });
return done.then(() => {
// If all rules were removed, get rid of the style element entirely // If all rules were removed, get rid of the style element entirely
if (sheet.trim().length === 0) { if (sheet.trim().length === 0) {
sheet.parentNode.removeChild(sheet); sheet.parentNode.removeChild(sheet);
@@ -164,9 +241,8 @@ module.exports = class CrittersWebpackPlugin {
// output some stats // output some stats
const name = style.$$name ? style.$$name.replace(/^\//, '') : 'inline CSS'; const name = style.$$name ? style.$$name.replace(/^\//, '') : 'inline CSS';
const percent = (before.length - sheet.length) / before.length * 100 | 0; const percent = sheet.length / before.length * 100 | 0;
console.log('\u001b[32mCritters: inlined ' + prettyBytes(sheet.length) + ' (' + percent + '% of original ' + prettyBytes(before.length) + ') of ' + name + '.\u001b[39m'); console.log('\u001b[32mCritters: inlined ' + prettyBytes(sheet.length) + ' (' + percent + '% of original ' + prettyBytes(before.length) + ') of ' + name + '.\u001b[39m');
});
} }
}; };
@@ -230,6 +306,15 @@ function getElementsByTagName (tagName) {
); );
} }
const reflectedProperty = attributeName => ({
get () {
return this.getAttribute(attributeName);
},
set (value) {
this.setAttribute(attributeName, value);
}
});
/** Methods and descriptors to mix into Element.prototype */ /** Methods and descriptors to mix into Element.prototype */
const ElementExtensions = { const ElementExtensions = {
nodeName: { nodeName: {
@@ -237,6 +322,8 @@ const ElementExtensions = {
return this.tagName.toUpperCase(); return this.tagName.toUpperCase();
} }
}, },
id: reflectedProperty('id'),
className: reflectedProperty('class'),
insertBefore (child, referenceNode) { insertBefore (child, referenceNode) {
if (!referenceNode) return this.appendChild(child); if (!referenceNode) return this.appendChild(child);
treeAdapter.insertBefore(this, child, referenceNode); treeAdapter.insertBefore(this, child, referenceNode);

2
package.json
View File

@@ -64,9 +64,11 @@
"mini-css-extract-plugin": "^0.3.0", "mini-css-extract-plugin": "^0.3.0",
"node-sass": "^4.7.2", "node-sass": "^4.7.2",
"nwmatcher": "^1.4.4", "nwmatcher": "^1.4.4",
"optimize-css-assets-webpack-plugin": "^4.0.0",
"parse5": "^4.0.0", "parse5": "^4.0.0",
"preact-render-to-string": "^3.7.0", "preact-render-to-string": "^3.7.0",
"preload-webpack-plugin": "github:GoogleChromeLabs/preload-webpack-plugin", "preload-webpack-plugin": "github:GoogleChromeLabs/preload-webpack-plugin",
"pretty-bytes": "^4.0.2",
"progress-bar-webpack-plugin": "^1.11.0", "progress-bar-webpack-plugin": "^1.11.0",
"sass-loader": "^6.0.7", "sass-loader": "^6.0.7",
"script-ext-html-webpack-plugin": "^2.0.1", "script-ext-html-webpack-plugin": "^2.0.1",

24
webpack.config.js
View File

@@ -4,8 +4,9 @@ const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin');
const ProgressBarPlugin = require('progress-bar-webpack-plugin'); const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin'); const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const PreloadWebpackPlugin = require('preload-webpack-plugin'); const HtmlPlugin = require('html-webpack-plugin');
const PreloadPlugin = require('preload-webpack-plugin');
const ReplacePlugin = require('webpack-plugin-replace'); const ReplacePlugin = require('webpack-plugin-replace');
const CopyPlugin = require('copy-webpack-plugin'); const CopyPlugin = require('copy-webpack-plugin');
const WorkboxPlugin = require('workbox-webpack-plugin'); const WorkboxPlugin = require('workbox-webpack-plugin');
@@ -126,7 +127,7 @@ module.exports = function(_, env) {
}), }),
// Remove old files before outputting a production build: // Remove old files before outputting a production build:
isProd && new CleanWebpackPlugin([ isProd && new CleanPlugin([
'assets', 'assets',
'**/*.{css,js,json,html}' '**/*.{css,js,json,html}'
], { ], {
@@ -147,6 +148,13 @@ module.exports = function(_, env) {
chunkFilename: '[name].chunk.[contenthash:5].css' chunkFilename: '[name].chunk.[contenthash:5].css'
}), }),
new OptimizeCssAssetsPlugin({
cssProcessorOptions: {
zindex: false,
discardComments: { removeAll: true }
}
}),
// These plugins fix infinite loop in typings-for-css-modules-loader. // These plugins fix infinite loop in typings-for-css-modules-loader.
// See: https://github.com/Jimdo/typings-for-css-modules-loader/issues/35 // See: https://github.com/Jimdo/typings-for-css-modules-loader/issues/35
new webpack.WatchIgnorePlugin([ new webpack.WatchIgnorePlugin([
@@ -177,10 +185,16 @@ module.exports = function(_, env) {
isProd && new PreloadWebpackPlugin(), isProd && new PreloadWebpackPlugin(),
isProd && new CrittersPlugin({ isProd && new CrittersPlugin({
// Don't inline fonts into critical CSS, but do preload them:
preloadFonts: true,
// convert critical'd <link rel="stylesheet"> to <link rel="preload" as="style">: // convert critical'd <link rel="stylesheet"> to <link rel="preload" as="style">:
async: true, async: true,
// copy original <link rel="stylesheet"> to the end of <body>: // Use media hack to load async (<link media="only x" onload="this.media='all'">):
preload: true media: true
// // use a $loadcss async CSS loading shim (DOM insertion to head)
// preload: 'js'
// // copy original <link rel="stylesheet"> to the end of <body>:
// preload: true
}), }),
// Inline constants during build, so they can be folded by UglifyJS. // Inline constants during build, so they can be folded by UglifyJS.