Preload fonts

Author: akoidan

build/webpack.config.prod.js

@@ -5,6 +5,7 @@ const {CleanWebpackPlugin} = require('clean-webpack-plugin');
 const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 const SriPlugin = require('webpack-subresource-integrity');
 const HtmlWebpackPlugin = require("html-webpack-plugin");
+const PreloadWebpackPlugin = require('preload-webpack-plugin');
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 module.exports = merge(config, {
@@ -38,6 +39,13 @@ module.exports = merge(config, {
  },
  plugins: [
  new CleanWebpackPlugin(),
+ new PreloadWebpackPlugin({
+ rel: 'preload',
+ as: 'font',
+ include: 'allAssets', // it's better to preload fonts, since browser can render the content in required format sooner, so it gives better UX
+ fileWhitelist: [/\.woff2/i], // preload font wince it's required all the time https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fpychat.org%2F%23%2Fpainter
+
+ }),
  new HtmlWebpackPlugin({
  template: '../src/index.ejs',
  inject: false,

package.json

@@ -87,6 +87,7 @@
  "npm-run-all": "4.1.5",
  "nyc": "15.1.0",
  "optimize-css-assets-webpack-plugin": "5.0.4",
+ "preload-webpack-plugin": "3.0.0-beta.4",
  "sass": "1.26.11",
  "sass-loader": "10.0.2",
  "servor": "4.0.2",

yarn.lock

@@ -10187,6 +10187,11 @@ preceptor-core@~0.10.0:
  log4js "1.1.1"
  underscore "1.7.0"
 
+preload-webpack-plugin@3.0.0-beta.4:
+ version "3.0.0-beta.4"
+ resolved "https://registry.yarnpkg.com/preload-webpack-plugin/-/preload-webpack-plugin-3.0.0-beta.4.tgz#b8a36046df3b4a1b61db55d92f1a5aebdb99d246"
+ integrity sha512-6hhh0AswCbp/U4EPVN4fbK2wiDkXhmgjjgEYEmXa21UYwjYzCIgh3ZRMXM21ZPLfbQGpdFuSL3zFslU+edjpwg==
+
 prelude-ls@^1.2.1:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"