Merge branch 'master' into inline-scss

trunk-rs · Apr 13, 2021 · d6ad58e · d6ad58e
2 parents 7b7d006 + 898e96f
commit d6ad58e
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 12 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -6,3 +6,4 @@ the applicable tasks. ❤️!
 **Checklist**
 - [ ] Updated CHANGELOG.md describing pertinent changes.
 - [ ] Updated README.md with pertinent info (may not always apply).
+- [ ] Squash down commits to one or two logical commits which clearly describe the work you've done. If you don't, then Dodd will `:)`.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@ Subheadings to categorize changes are `added, changed, deprecated, removed, fixe
 ## Unreleased
 ### added
 - Closed [#158](https://github.com/thedodd/trunk/issues/158): Support for inlining SASS/SCSS after compilation using the new `data-inline` attribute
+- Closed [#145](https://github.com/thedodd/trunk/issues/145): Preloading of the WASM and JS files are now added to the `<head>` element. This ensures that the code starts downloading as soon as possible, and can make your app start up a few seconds earlier on a slow network.
 
 ### fixed
 - Fixed [#148](https://github.com/thedodd/trunk/issues/148): any changes detected under a `.git` path are now being ignored by default.

diff --git a/README.md b/README.md
@@ -75,12 +75,16 @@ Trunk uses a source HTML file to drive all asset building and bundling. Trunk al
 ```html
 <html>
   <head>
-    <link rel="stylesheet" href="/index.700471f89cef12e4.css">
+    <link rel="stylesheet" href="/index-c920ca43256fdcb9.css">
+    <link rel="preload" href="/index-7eeee8fa37b7636a_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
+    <link rel="modulepreload" href="/index-7eeee8fa37b7636a.js">
+  </head>
+  <body>
     <script type="module">
-      import init from '/index-719b4e04e016028b.js';
-      init('/index-719b4e04e016028b_bg.wasm');
+      import init from '/index-7eeee8fa37b7636a.js';
+      init('/index-7eeee8fa37b7636a_bg.wasm');
     </script>
-  </head>
+  </body>
 </html>
 ```
 

diff --git a/site/content/_index.md b/site/content/_index.md
@@ -58,12 +58,16 @@ Trunk uses a source HTML file to drive all asset building and bundling. Trunk al
 ```html
 <html>
   <head>
-    <link rel="stylesheet" href="/index.700471f89cef12e4.css">
+    <link rel="stylesheet" href="/index-c920ca43256fdcb9.css">
+    <link rel="preload" href="/index-7eeee8fa37b7636a_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
+    <link rel="modulepreload" href="/index-7eeee8fa37b7636a.js">
+  </head>
+  <body>
     <script type="module">
-      import init from '/index-719b4e04e016028b.js';
-      init('/index-719b4e04e016028b_bg.wasm');
+      import init from '/index-7eeee8fa37b7636a.js';
+      init('/index-7eeee8fa37b7636a_bg.wasm');
     </script>
-  </head>
+  </body>
 </html>
 ```
 

diff --git a/src/pipelines/rust_app.rs b/src/pipelines/rust_app.rs
@@ -283,15 +283,27 @@ pub struct RustAppOutput {
 
 impl RustAppOutput {
     pub async fn finalize(self, dom: &mut Document) -> Result<()> {
+        let (base, js, wasm, head, body) = (&self.cfg.public_url, &self.js_output, &self.wasm_output, "html head", "html body");
+
+        let preload = format!(
+            r#"
+<link rel="preload" href="{base}{wasm}" as="fetch" type="application/wasm" crossorigin>
+<link rel="modulepreload" href="{base}{js}">"#,
+            base = base,
+            js = js,
+            wasm = wasm,
+        );
+        dom.select(head).append_html(preload);
+
         let script = format!(
             r#"<script type="module">import init from '{base}{js}';init('{base}{wasm}');</script>"#,
-            base = self.cfg.public_url,
-            js = &self.js_output,
-            wasm = &self.wasm_output,
+            base = base,
+            js = js,
+            wasm = wasm,
         );
         match self.id {
             Some(id) => dom.select(&super::trunk_id_selector(id)).replace_with_html(script),
-            None => dom.select("html head").append_html(script),
+            None => dom.select(body).append_html(script),
         }
         Ok(())
     }