Merge pull request #77 from cloud-gov/ethan-performance-changes

Ethan performance changes
cloud-gov · Oct 25, 2024 · 64b89be · 64b89be
2 parents db4c632 + c714326
commit 64b89be
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 33 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -15,9 +15,6 @@ module.exports = function (config) {
   // Copy the `admin` folders to the output
   config.addPassthroughCopy('admin');
 
-  // Copy USWDS init JS so we can load it in HEAD to prevent banner flashing
-  config.addPassthroughCopy({'./node_modules/@uswds/uswds/dist/js/uswds-init.js': 'assets/js/uswds-init.js'});
-
   // Add plugins
   config.addPlugin(pluginRss);
   config.addPlugin(pluginNavigation);

diff --git a/.gitignore b/.gitignore
@@ -120,3 +120,4 @@ web_modules/
 _site
 public
 node_modules
+_data/assetPaths.json
diff --git a/_data/assetPaths.json b/_data/assetPaths.json
diff --git a/_includes/layouts/base.html b/_includes/layouts/base.html
@@ -1,10 +1,9 @@
+<!DOCTYPE html>
 {% comment %}
 This is used for just about every page. It provides the border around the content.
 The home page uses wide.html layout, since it extends full width of page
 {% endcomment %}
 
-<!DOCTYPE html>
-
 <html lang="en">
 
 {% include "meta.html" %}

diff --git a/_includes/meta.html b/_includes/meta.html
@@ -29,9 +29,20 @@
   <meta property="og:type" content="article" />
   <link rel="canonical" href="{{ page.url }}" />
   <meta property="og:url" content="{{ page.url }}" />
-  <script async="" src="{{ assetPaths['uswds.js'] }} "></script>
+
+  <script src="{{ assetPaths['uswds-init.js'] }}"></script>
   <!-- CSS
     ================================================== -->
-    <link rel="preload" as="style" href="{{ assetPaths['styles.css'] }}" />
-    <link rel="stylesheet" href="{{ assetPaths['styles.css'] }}" type="text/css" />
+  <link rel="stylesheet" href="{{ assetPaths['styles.css'] }}" type="text/css" />
+
+  {% comment %}
+  Preload only the files that are needed for the content in the initial viewport. This
+  will likely include the fonts needed for the navigation, page heading, and the font needed for the
+  first paragraph of body copy. The `crossorigin` attribute may be required based on the type
+  of asset you wish to preload in order for the preload to work properly.
+  {% endcomment %}
+  <link rel="preload" href="{{ assetPaths['PublicSans-Regular.woff2'] }}" as="font" type="font/woff2" crossorigin>
+  <link rel="preload" href="{{ assetPaths['PublicSans-Bold.woff2'] }}" as="font" type="font/woff2" crossorigin>
+  <link rel="preload" href="{{ assetPaths['Latin-Merriweather-Bold.woff2'] }}" as="font" type="font/woff2" crossorigin>
+
 </head>
diff --git a/config/buildAssets.js b/config/buildAssets.js
@@ -3,19 +3,47 @@ const path = require('path');
 const esbuild = require('esbuild');
 const { sassPlugin } = require('esbuild-sass-plugin');
 
+async function getFontFiles(assetPath, pathPrefix) {
+  const assetDirs = await fs.readdir(assetPath, {withFileTypes: true});
+  const fonts = await Promise.all(
+    assetDirs.map(async (item) => {
+      const itemPath = path.join(assetPath, item.name);
+      const stats = await fs.lstat(itemPath);
+      if (stats.isFile() && path.extname(item.name) === '.woff2') {
+        return item.name;
+      }
+      return null;
+    })
+  );
+  return fonts.filter(item => item !== null)
+    .map((file) => {
+      const {name, ext} = path.parse(file);
+      const hashedAt = name.lastIndexOf('-');
+      const originalName = name.slice(0, hashedAt);
+      const key = `${originalName}${ext}`;
+      return {[key]: `${pathPrefix}/assets/${file}`};
+    });
+}
+
 async function createAssetPaths() {
-  let pathPrefix = ''
+  let pathPrefix = '';
 
   if (process.env.BASEURL) {
-    pathPrefix = process.env.BASEURL
+    pathPrefix = process.env.BASEURL;
   }
 
   const assetPath = path.join(__dirname, '../_site/assets');
-  const assetDirs = await fs.readdir(assetPath);
+  let assetDirs = await fs.readdir(assetPath, { withFileTypes: true });
+  const fontFiles = await getFontFiles(assetPath, pathPrefix);
+
+  assetDirs = assetDirs
+    .filter((item) => item.isDirectory())
+    .map((item) => item.name);
+
   const assetsFiles = await Promise.all(
     assetDirs.map(async (dir) => {
       const files = await fs.readdir(
-        path.join(__dirname, '../_site/assets', dir)
+        path.join(__dirname, '../_site/assets', dir),
       );
       return files.map((file) => {
         const { name, ext } = path.parse(file);
@@ -28,24 +56,27 @@ async function createAssetPaths() {
       });
     })
   );
-  const assets = Object.assign({}, ...assetsFiles.flat());
+  const assets = Object.assign({}, ...assetsFiles.flat(), ...fontFiles.flat());
   const outputData = path.join(__dirname, '../_data/assetPaths.json');
 
   return await fs.writeFile(outputData, JSON.stringify(assets, null, 2));
 }
 
 esbuild
   .build({
-    entryPoints: ['styles/styles.scss', 'js/app.js', 'js/admin.js'],
+    entryPoints: ['styles/styles.scss', 'js/app.js', 'js/admin.js', 'js/uswds-init.js'],
     entryNames: '[dir]/[name]-[hash]',
     outdir: '_site/assets',
     format: 'iife',
     loader: {
-      '.png': 'dataurl',
-      '.svg': 'dataurl',
-      '.ttf': 'dataurl',
-      '.woff': 'dataurl',
-      '.woff2': 'dataurl',
+      '.jpg': 'file',
+      '.gif': 'file',
+      '.png': 'file',
+      '.webp': 'file',
+      '.svg': 'file',
+      '.ttf': 'file',
+      '.woff': 'file',
+      '.woff2': 'file',
     },
     minify: process.env.ELEVENTY_ENV === 'production',
     sourcemap: process.env.ELEVENTY_ENV !== 'production',

diff --git a/js/uswds-init.js b/js/uswds-init.js
@@ -0,0 +1 @@
+require('../node_modules/@uswds/uswds/dist/js/uswds-init');
diff --git a/package.json b/package.json
@@ -5,19 +5,19 @@
   "main": "index.js",
   "scripts": {
     "build": "npm run assets:build && npx @11ty/eleventy",
-    "assets:autoprefix": "postcss _site/assets/styles/*.css -r --use autoprefixer",
+    "assets:autoprefix": "postcss _site/assets/styles/*.css -r",
     "assets:build": "node ./config/buildAssets && npm run assets:autoprefix",
     "assets:clean": "rimraf _site/assets",
     "assets:refresh": "npm run assets:clean && npm run assets:build",
     "assets:watch": "chokidar 'js/**' 'styles/**' -c 'npm run assets:refresh' --polling",
     "clean": "rimraf _site",
-    "dev": "npm run clean && npm-run-all -p dev:assets dev:serve",
+    "dev": "npm run clean && npm run assets:build && npm-run-all -p dev:assets dev:serve",
     "dev:clean": "npm run clean && npm run dev",
     "dev:assets": "npm run assets:refresh && npm run assets:watch",
     "dev:debug": "DEBUG=* npx @11ty/eleventy --serve --watch",
     "dev:serve": "npx @11ty/eleventy --serve --watch",
     "dev:cms": "npx decap-server",
-    "federalist": "npm run build",
+    "pages": "ELEVENTY_ENV=production npm run build",
     "serve": "npx @11ty/eleventy --serve",
     "start": "npx @11ty/eleventy --serve",
     "test": "echo \"Error: no test specified\" && exit 1"

diff --git a/postcss.config.js b/postcss.config.js
@@ -1,3 +1,7 @@
 module.exports = {
-  plugins: [require('autoprefixer')],
-};
+    plugins: [
+        require('autoprefixer')({
+            map: process.env.ELEVENTY_ENV !== 'production'
+        }),
+    ],
+};