Merge pull request element-hq#17039 from vector-im/gsouquet-preload-fonts

germain-gg · web-flow · commit 8692d6fa894d · 2021-04-22T17:15:06.000+01:00
diff --git a/package.json b/package.json
@@ -86,6 +86,7 @@
     "@babel/preset-typescript": "^7.12.7",
     "@babel/register": "^7.12.10",
     "@babel/runtime": "^7.12.5",
+    "@principalstudio/html-webpack-inject-preload": "^1.2.7",
     "@types/flux": "^3.1.9",
     "@types/modernizr": "^3.5.3",
     "@types/node": "^14.14.22",
@@ -111,7 +112,7 @@
     "fake-indexeddb": "^3.1.2",
     "file-loader": "^5.1.0",
     "fs-extra": "^0.30.0",
-    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-plugin": "^4.5.2",
     "jest": "^26.6.3",
     "jest-environment-jsdom-sixteen": "^1.0.3",
     "json-loader": "^0.5.7",
diff --git a/src/vector/index.html b/src/vector/index.html
@@ -22,7 +22,7 @@
     <meta name="msapplication-TileImage" content="<%= require('../../res/vector-icons/mstile-150.png') %>">
     <meta name="msapplication-config" content="<%= require('../../res/vector-icons/browserconfig.xml') %>">
     <meta name="theme-color" content="#ffffff">
-    <meta property="og:image" content="<%= htmlWebpackPlugin.options.vars.og_image_url %>" />
+    <meta property="og:image" content="<%= og_image_url %>" />
     <meta http-equiv="Content-Security-Policy" content="
         default-src 'none';
         style-src 'self' 'unsafe-inline';
@@ -49,11 +49,20 @@
            <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>
-  <body style="height: 100%; margin: 0;" data-vector-indexeddb-worker-script="<%= htmlWebpackPlugin.files.chunks['indexeddb-worker'].entry %>">
+  <body style="height: 100%; margin: 0;" data-vector-indexeddb-worker-script="<%= htmlWebpackPlugin.files.js.find(entry => entry.includes("indexeddb-worker.js")) %>">
     <noscript>Sorry, Element requires JavaScript to be enabled.</noscript> <!-- TODO: Translate this? -->
     <section id="matrixchat" style="height: 100%; overflow: auto;" class="notranslate"></section>
-    <script src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
+    <script src="<%= htmlWebpackPlugin.files.js.find(entry => entry.includes("bundle.js")) %>"></script>
 
     <!-- Legacy supporting Prefetch images -->
     <img src="<%= require('matrix-react-sdk/res/img/warning.svg') %>" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
diff --git a/webpack.config.js b/webpack.config.js
@@ -4,6 +4,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const webpack = require("webpack");
+const HtmlWebpackInjectPreload = require('@principalstudio/html-webpack-inject-preload');
 
 let ogImageUrl = process.env.RIOT_OG_IMAGE_URL;
 if (!ogImageUrl) ogImageUrl = 'https://app.element.io/themes/element/img/logos/opengraph.png';
@@ -343,7 +344,7 @@ module.exports = (env, argv) => {
                 inject: false,
                 excludeChunks: ['mobileguide', 'usercontent', 'jitsi'],
                 minify: argv.mode === 'production',
-                vars: {
+                templateParameters: {
                     og_image_url: ogImageUrl,
                 },
             }),
@@ -386,6 +387,10 @@ module.exports = (env, argv) => {
                 chunks: ['usercontent'],
             }),
 
+            new HtmlWebpackInjectPreload({
+                files: [{ match: /.*Inter.*\.woff2?$/ }],
+            }),
+
             ...additionalPlugins,
         ],
 
diff --git a/yarn.lock b/yarn.lock
