Merge pull request #18 from GoogleChromeLabs/critters-async-await

Critters: async/await & font handling
This commit is contained in:
Jason Miller
2018-04-17 21:33:59 -04:00
committed by GitHub
3 changed files with 184 additions and 81 deletions

View File

@@ -5,8 +5,9 @@ const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const PreloadWebpackPlugin = require('preload-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlPlugin = require('html-webpack-plugin');
const PreloadPlugin = require('preload-webpack-plugin');
const ReplacePlugin = require('webpack-plugin-replace');
const CopyPlugin = require('copy-webpack-plugin');
const WorkboxPlugin = require('workbox-webpack-plugin');
@@ -121,7 +122,7 @@ module.exports = function(_, env) {
}),
// Remove old files before outputting a production build:
isProd && new CleanWebpackPlugin([
isProd && new CleanPlugin([
'assets',
'**/*.{css,js,json,html}'
], {
@@ -142,6 +143,13 @@ module.exports = function(_, env) {
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.
// See: https://github.com/Jimdo/typings-for-css-modules-loader/issues/35
new webpack.WatchIgnorePlugin([
@@ -172,10 +180,16 @@ module.exports = function(_, env) {
isProd && new PreloadWebpackPlugin(),
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">:
async: true,
// copy original <link rel="stylesheet"> to the end of <body>:
preload: true
// Use media hack to load async (<link media="only x" onload="this.media='all'">):
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.