Trick to avoid duplicating the SVG in the source

lib/as-text-plugin.js

@@ -0,0 +1,38 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { promises as fs } from 'fs';
+
+const prefix = 'as-text:';
+
+export default function dataURLPlugin() {
+  return {
+    name: 'as-text-plugin',
+    async resolveId(id, importer) {
+      if (!id.startsWith(prefix)) return;
+      const realId = id.slice(prefix.length);
+      const resolveResult = await this.resolve(realId, importer);
+      if (!resolveResult) throw Error(`Cannot find ${realId} from ${importer}`);
+      return prefix + resolveResult.id;
+    },
+    async load(id) {
+      if (!id.startsWith(prefix)) return;
+
+      const realId = id.slice(prefix.length);
+      this.addWatchFile(realId);
+
+      const source = await fs.readFile(realId, { encoding: 'utf-8' });
+
+      return `export default ${JSON.stringify(source)}`;
+    },
+  };
+}

missing-types.d.ts

@@ -49,6 +49,11 @@ declare module 'data-url-text:*' {
   export default url;
 }
 
+declare module 'as-text:*' {
+  const text: string;
+  export default text;
+}
+
 declare module 'service-worker:*' {
   const url: string;
   export default url;

rollup.config.js

@@ -32,6 +32,7 @@ import featurePlugin from './lib/feature-plugin';
 import initialCssPlugin from './lib/initial-css-plugin';
 import serviceWorkerPlugin from './lib/sw-plugin';
 import dataURLPlugin from './lib/data-url-plugin';
+import asTextPlugin from './lib/as-text-plugin';
 import entryDataPlugin, { fileNameToURL } from './lib/entry-data-plugin';
 import dedent from 'dedent';
 
@@ -89,6 +90,7 @@ export default async function ({ watch }) {
       'codecs',
     ]),
     urlPlugin(),
+    asTextPlugin(),
     dataURLPlugin(),
     cssPlugin(),
   ];

src/shared/prerendered-app/Intro/index.tsx

@@ -14,7 +14,7 @@ import smallSectionAsset from 'url:./imgs/info-content/small.svg';
 import simpleSectionAsset from 'url:./imgs/info-content/simple.svg';
 import secureSectionAsset from 'url:./imgs/info-content/secure.svg';
 import logoIcon from 'url:./imgs/demos/icon-demo-logo.png';
-import logoWithText from 'data-url-text:./imgs/logo-with-text.svg';
+import logoSVGSourceImport from 'as-text:./logo-svg-include.txt';
 import * as style from './style.css';
 import type SnackBarElement from 'shared/custom-els/snack-bar';
 import 'shared/custom-els/snack-bar';
@@ -69,6 +69,12 @@ async function getImageClipboardItem(
   }
 }
 
+// The logo SVG source is pretty big, so to avoid it existing in both the HTML
+// and the JS bundle, we pick it up from the HTML.
+const logoSVGSource = __PRERENDER__
+  ? logoSVGSourceImport
+  : document.querySelector('.' + style.logoContainer)!.innerHTML;
+
 interface Props {
   onFile?: (file: File) => void;
   showSnack?: SnackBarElement['showSnackbar'];
@@ -240,15 +246,10 @@ export default class Intro extends Component<Props, State> {
               class={style.blobCanvas}
             />
           )}
-          <h1 class={style.logoContainer}>
-            <img
-              class={style.logo}
-              src={logoWithText}
-              alt="Squoosh"
-              width="539"
-              height="162"
-            />
-          </h1>
+          <h1
+            class={style.logoContainer}
+            dangerouslySetInnerHTML={{ __html: logoSVGSource }}
+          />
           <div class={style.loadImg}>
             {showBlobSVG && (
               <svg

src/shared/prerendered-app/Intro/style.css

@@ -1,3 +1,11 @@
+/* Just the glyphs needed for the Squoosh logo */
+@font-face {
+  font-family: logofont;
+  font-weight: 700;
+  src: url(data:font/woff;base64,d09GMgABAAAAAASoAA4AAAAACOQAAARUAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbgnYcgXAGYABkEQwKhHiEFgsUAAE2AiQDJAQgBYJaByAbeQfIxId/N/1zb0JJk7qwVQyoSyhM6qJf2zN3wnP5MyX/c6mabKKFAVwk4QDd+3f7Z41FoYvttryoVK6NsWls0wJjfeO38YjNiCJjtHr/1Q8CwAqDCAUBr2QweT2PEoyA1elzSuDRPDnUg8D2odZuRPU0jvQhDaxz5rMh0dmYGFMJs4nu1qE+eGjM/weALmNBwUEBOxTgRXxFMYpg//e8Ci0oLAD5Z/l7jALyz0eIk0p5wwIKMGmoUVDk+I2Voc2UQOpf+V8SHykzsc2YglhhpAxij4qYCCDLLiZGpIxaxGLgdEfA8VXagNHBPOEGN4kdxIwSYCOPFjwtuDxUnqS+IGdGuWtrAgUsQYZRHpDu7Qiw6ukb7cWFrWzAQoFsxEIZPaFS7IAQDQ4cvEx4DjEL+W8XY9w93bi6CVjaTB8XOUO3aIVhv7jXI3UoIVGDVOAYRkFZmv6lSiyebcjPN+BqWJ91Zp43fwUwPxAfFchViYiY6etaTAWH6kKIhE7SgEaAL0DMDnZmf6FCMTrQj0EMY1SW726Rv5Tvki/Jp/KJfCwf5XNoQXWWGi/LsNXQcgvxSnnJ8wFi43KUbaZAdno0JKEudnYudkHOvy6ZysqvkYTtt8jiu2VxJhNZfP99YVuKLLnyTX7rdSy8cT5WkrBgNPL1AkqEuyzOB+WZxXf5LSMoLzmnXHS9/9b7ZNHk7wAjFqQ3hMZy/nbFtQXbNAIRWP4jQ8kUVX7FG8L2Y4VH4/QvOjyltORefuthLJSWBnyUZCKMQBfeEbbfP3h5MvqPEuA12/1Or4a5yB8MYpzmv+DgZ3O9ntK5NjZdTEis7owRG/urcsYir+4JU2+cUdUY36zxbeoo1RsaBsJTkP7a8gPKCq64OCyytqmvKXVZE5mtjskqTmWW8Y3ttF43lZujm57W5+dN63XTObm6qWl9XsDErwGiVhMg/hoY+GugqNEE6n4NxH280sBFFITFZA/oMqby8zKmB3TZMfnqDC5tyrRUm/F7gKhWB4i/Bfj/FiCq1QHi7/643nboYs9I1K/XB/n/4eH+8COPf1aYl6yOya4KiL8ypq8/Qso6O+HoL9pfsL/okJObGJlwoSkkBZds6wfb4pYDYzxCEjIL09ll83QG11IUGgUAAJrLVRQvuOTOlNTbpvzOCcwPZllp+cGK/bUffKT+wRxg/trKyDwPAmVzJTtUmnnR/Ca2bGU0B5hvtjI2u3ZLmoci/IQP0Fz40ipk0Hb402H4k7/hScuRQrJj7rXEg+BR85QaWsDzADqVUNUxBLbRYp0JnCMELkwBnsiOEWgYqDGjYaHCzRoFPPDyyy3gg68goh8DmMQQOtGODoxAhShEIBKx9DgD+tGPdvSgFSrkIAcitEolEz3oIVeRDxy+4lvVSiuGMEbLtUDr97BiNKIPw8hCvzLeYjOefMW4mq5hUSguFWNZnL3D6EQ/+tLPa3ktEYgO08G8O9bbQgkWAA==)
+    format('woff2');
+}
+
 .intro {
   composes: abs-fill from global;
   -webkit-overflow-scrolling: touch;
@@ -35,12 +43,12 @@
 
 .logo-container {
   margin: 5rem 0 1rem;
-}
 
-.logo {
-  transform: translate(-1%, 0);
-  width: 189px;
-  height: auto;
+  & svg {
+    transform: translate(-1%, 0);
+    width: 189px;
+    height: auto;
+  }
 }
 
 .load-img {