Preload Inter font to avoid FOIT on slow connections

This commit is contained in:
Germain Souquet 2021-04-22 12:09:50 +01:00
parent 708f6a26b1
commit 417835fcca
4 changed files with 28 additions and 0 deletions

View file

@ -86,6 +86,7 @@
"@babel/preset-typescript": "^7.12.7", "@babel/preset-typescript": "^7.12.7",
"@babel/register": "^7.12.10", "@babel/register": "^7.12.10",
"@babel/runtime": "^7.12.5", "@babel/runtime": "^7.12.5",
"@principalstudio/html-webpack-inject-preload": "^1.2.7",
"@types/flux": "^3.1.9", "@types/flux": "^3.1.9",
"@types/modernizr": "^3.5.3", "@types/modernizr": "^3.5.3",
"@types/node": "^14.14.22", "@types/node": "^14.14.22",

View file

@ -49,6 +49,15 @@
<link rel="stylesheet" href="<%= file %>"> <link rel="stylesheet" href="<%= file %>">
<% } <% }
} %> } %>
<% for (var i=0; i < htmlWebpackPlugin.tags.headTags.length; i++) {
var tag = htmlWebpackPlugin.tags.headTags[i];
var path = tag.attributes && tag.attributes.href;
if (path.indexOf("Inter") !== -1) { %>
<link rel="preload" as="font" href="<%= path %>" crossorigin="anonymous"/>
<% }
} %>
</head> </head>

View file

@ -4,6 +4,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const webpack = require("webpack"); const webpack = require("webpack");
const HtmlWebpackInjectPreload = require('@principalstudio/html-webpack-inject-preload');
let ogImageUrl = process.env.RIOT_OG_IMAGE_URL; let ogImageUrl = process.env.RIOT_OG_IMAGE_URL;
if (!ogImageUrl) ogImageUrl = 'https://app.element.io/themes/element/img/logos/opengraph.png'; if (!ogImageUrl) ogImageUrl = 'https://app.element.io/themes/element/img/logos/opengraph.png';
@ -386,6 +387,10 @@ module.exports = (env, argv) => {
chunks: ['usercontent'], chunks: ['usercontent'],
}), }),
new HtmlWebpackInjectPreload({
files: [{ match: /.*\.(woff2?|ttf|eot)$/ }],
}),
...additionalPlugins, ...additionalPlugins,
], ],
@ -418,6 +423,9 @@ module.exports = (env, argv) => {
hot: false, hot: false,
inline: false, inline: false,
}, },
stats: {
warnings: false,
},
}; };
}; };

View file

@ -1263,6 +1263,11 @@
"@nodelib/fs.scandir" "2.1.4" "@nodelib/fs.scandir" "2.1.4"
fastq "^1.6.0" fastq "^1.6.0"
"@principalstudio/html-webpack-inject-preload@^1.2.7":
version "1.2.7"
resolved "https://registry.yarnpkg.com/@principalstudio/html-webpack-inject-preload/-/html-webpack-inject-preload-1.2.7.tgz#0c1f0b32a34d814b36ce84111f89990441cc64e8"
integrity sha512-KJKkiKG63ugBjf8U0e9jUcI9CLPTFIsxXplEDE0oi3mPpxd90X9SJovo3W2l7yh/ARKIYXhQq8fSXUN7M29TzQ==
"@sinonjs/commons@^1.7.0": "@sinonjs/commons@^1.7.0":
version "1.8.2" version "1.8.2"
resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.2.tgz#858f5c4b48d80778fde4b9d541f27edc0d56488b" resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.2.tgz#858f5c4b48d80778fde4b9d541f27edc0d56488b"
@ -12128,6 +12133,11 @@ vary@~1.1.2:
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc" resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw= integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
velocity-animate@^2.0.6:
version "2.0.6"
resolved "https://registry.yarnpkg.com/velocity-animate/-/velocity-animate-2.0.6.tgz#1811ca14df7fbbef05740256f6cec0fd1b76575f"
integrity sha512-tU+/UtSo3GkIjEfk2KM4e24DvpgX0+FzfLr7XqNwm9BCvZUtbCHPq/AFutx/Mkp2bXlUS9EcX8yxu8XmzAv2Kw==
vendors@^1.0.0: vendors@^1.0.0:
version "1.0.4" version "1.0.4"
resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e" resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"