feat(perf): Minify css classes, no inline CSS, strip unnecessary markup

- Introduce gatsby-plugin-no-javascript-utils to get rid of inline CSS in favor of a central css file, strip additional markup from built HTML, and stop building sourcemaps. - Use gatsby-plugin-mini-css-class-name to get minimal CSS class names only in production - Patch update to gatsby-plugin-no-javascript to get rid of CSS and JavaScript injected by gatsby-remark-autolink-headers - Add CSS for gatsby-plugin-no-javascript to global.less, and remove it from Markdown stories
scottnonnenberg · Dec 7, 2020 · 1f861fb · 1f861fb
1 parent 8eafa67
commit 1f861fb
Show file tree

Hide file tree

Showing 12 changed files with 94 additions and 50 deletions.
diff --git a/css/global.less b/css/global.less
@@ -58,3 +58,40 @@ h6 a {
 ::selection {
   background-color: @lightOrange;
 }
+
+// For the header links generated by gatsby-remark-autolink-headers
+//   Note: by default it automatically adds this to the final page, but we strip that out
+
+.anchor.before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translateX(-100%);
+  padding-right: 4px;
+}
+.anchor.after {
+  display: inline-block;
+  padding-left: 4px;
+}
+h1 .anchor svg,
+h2 .anchor svg,
+h3 .anchor svg,
+h4 .anchor svg,
+h5 .anchor svg,
+h6 .anchor svg {
+  visibility: hidden;
+}
+h1:hover .anchor svg,
+h2:hover .anchor svg,
+h3:hover .anchor svg,
+h4:hover .anchor svg,
+h5:hover .anchor svg,
+h6:hover .anchor svg,
+h1 .anchor:focus svg,
+h2 .anchor:focus svg,
+h3 .anchor:focus svg,
+h4 .anchor:focus svg,
+h5 .anchor:focus svg,
+h6 .anchor:focus svg {
+  visibility: visible;
+}
diff --git a/gatsbyConfig.ts b/gatsbyConfig.ts
@@ -74,8 +74,22 @@ const gatsbyConfig = {
     },
     'gatsby-plugin-typescript',
     'gatsby-plugin-less',
+    'gatsby-plugin-mini-css-class-name',
     'gatsby-plugin-react-helmet',
     'gatsby-plugin-no-javascript',
+    {
+      resolve: 'gatsby-plugin-no-javascript-utils',
+      options: {
+        noSourcemaps: true,
+        removeGeneratorTag: false,
+        removeReactHelmetAttrs: true,
+        noInlineStyles: true,
+        removeGatsbyAnnouncer: true,
+        // Note: this one causes the build to crash if you turn it on
+        removeFocusWrapper: false,
+        removePreloadLinks: true,
+      },
+    },
   ],
 };
 

diff --git a/gatsbyNode.ts b/gatsbyNode.ts
@@ -99,6 +99,10 @@ const gatsbyNode = {
     const tags = sortBy(uniq(flatten(posts.map(post => post?.frontmatter?.tags))));
 
     tags.forEach(tag => {
+      if (!tag) {
+        return;
+      }
+
       const postsWithTag = filter(posts, post =>
         includes(get(post, 'frontmatter.tags'), tag)
       );

diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "format": "prettier --write \"*.{css,js,json,md,scss,ts,tsx}\" \"./**/*.{css,js,json,md,scss,ts,tsx}\"",
     "develop": "gatsby develop",
     "build": "gatsby build",
+    "clean": "gatsby clean",
     "serve": "cd public && http-server -p 8000 -a localhost",
     "storybook": "start-storybook -p 6006 -s ./",
     "check-git": "scripts/check_git.sh",
@@ -34,7 +35,9 @@
     "fs-extra": "9.0.1",
     "gatsby": "2.25.3",
     "gatsby-plugin-less": "4.0.6",
+    "gatsby-plugin-mini-css-class-name": "3.0.0",
     "gatsby-plugin-no-javascript": "2.0.5",
+    "gatsby-plugin-no-javascript-utils": "0.5.0",
     "gatsby-plugin-react-helmet": "3.3.14",
     "gatsby-plugin-root-import": "2.0.5",
     "gatsby-plugin-sharp": "2.7.1",

diff --git a/patches/gatsby-plugin-no-javascript+2.0.5.patch b/patches/gatsby-plugin-no-javascript+2.0.5.patch
@@ -1,8 +1,23 @@
 diff --git a/node_modules/gatsby-plugin-no-javascript/gatsby-ssr.js b/node_modules/gatsby-plugin-no-javascript/gatsby-ssr.js
-index 5484ebc..9a26c13 100644
+index 5484ebc..da96ab2 100644
 --- a/node_modules/gatsby-plugin-no-javascript/gatsby-ssr.js
 +++ b/node_modules/gatsby-plugin-no-javascript/gatsby-ssr.js
-@@ -64,6 +64,9 @@ function getPostBodyComponentsNoJS(postBodyComponents, pluginOptions) {
+@@ -44,6 +44,14 @@ function getHeadComponentsNoJS(headComponents, pluginOptions) {
+         if (headComponent.props.href && (headComponent.props.href.startsWith('/static/') || headComponent.props.href.startsWith('/page-data/'))) {
+             return false;
+         }
++        // This is the CSS added automatically by gatsby-remark-autolink-headers
++        if (headComponent.key === 'gatsby-remark-autolink-headers-style') {
++            return false;
++        }
++        // This is the Javascript added automatically for a better SPA scroll experience: gatsby-remark-autolink-headers
++        if (headComponent.key === 'gatsby-remark-autolink-headers-script') {
++            return false;
++        }
+         return pageScripts.find(function (script) {
+             return headComponent.props.as === 'script' &&
+                 "/" + script.name === headComponent.props.href &&
+@@ -64,6 +72,9 @@ function getPostBodyComponentsNoJS(postBodyComponents, pluginOptions) {
          if (postBodyComponent.props.id && (postBodyComponent.props.id === 'gatsby-script-loader' || postBodyComponent.props.id === 'gatsby-chunk-mapping')) {
              return false;
          }

diff --git a/src/components/Author.tsx b/src/components/Author.tsx
@@ -37,7 +37,7 @@ export default function Author(): ReactElement | null {
   const { icon, url } = data.site.siteMetadata.author;
 
   return (
-    <div className="author">
+    <div>
       <a href={url}>
         <img src={icon} className={styles.image} alt="It's me!" />
       </a>

diff --git a/src/components/Markdown.stories.tsx b/src/components/Markdown.stories.tsx
@@ -1,54 +1,9 @@
 import * as React from 'react';
 import Markdown from './Markdown';
-import { Helmet } from 'react-helmet';
 
 import { storiesOf } from '@storybook/react';
 
-// Styles injected by our markdown handling; does the right thing with anchor links on hover
-const css = `
-.anchor.before {
-  position: absolute;
-  top: 0;
-  left: 0;
-  transform: translateX(-100%);
-  padding-right: 4px;
-}
-.anchor.after {
-  display: inline-block;
-  padding-left: 4px;
-}
-h1 .anchor svg,
-h2 .anchor svg,
-h3 .anchor svg,
-h4 .anchor svg,
-h5 .anchor svg,
-h6 .anchor svg {
-  visibility: hidden;
-}
-h1:hover .anchor svg,
-h2:hover .anchor svg,
-h3:hover .anchor svg,
-h4:hover .anchor svg,
-h5:hover .anchor svg,
-h6:hover .anchor svg,
-h1 .anchor:focus svg,
-h2 .anchor:focus svg,
-h3 .anchor:focus svg,
-h4 .anchor:focus svg,
-h5 .anchor:focus svg,
-h6 .anchor:focus svg {
-  visibility: visible;
-}
-`;
-
-const stories = storiesOf('src/components/Markdown', module).addDecorator(story => (
-  <div>
-    <Helmet>
-      <style>{css}</style>
-    </Helmet>
-    {story()}
-  </div>
-));
+const stories = storiesOf('src/components/Markdown', module);
 
 stories.add('Basic HTML', () => <Markdown html={basicHTML} />);
 

diff --git a/src/components/SEO.tsx b/src/components/SEO.tsx
@@ -105,7 +105,6 @@ function generateMetaTags(
   const url = siteMetadata.domain + location.pathname;
 
   const tags = [
-    create('generator', 'https://www.gatsbyjs.org'),
     <link key="canonical" rel="canonical" href={url} />,
     <link
       key="alternate"

diff --git a/yarn-offline-cache/gatsby-plugin-mini-css-class-name-3.0.0.tgz b/yarn-offline-cache/gatsby-plugin-mini-css-class-name-3.0.0.tgz
diff --git a/yarn-offline-cache/gatsby-plugin-no-javascript-utils-0.5.0.tgz b/yarn-offline-cache/gatsby-plugin-no-javascript-utils-0.5.0.tgz
diff --git a/yarn-offline-cache/mini-css-class-name-0.10.0.tgz b/yarn-offline-cache/mini-css-class-name-0.10.0.tgz
diff --git a/yarn.lock b/yarn.lock
@@ -9165,6 +9165,18 @@ gatsby-plugin-less@4.0.6:
     "@babel/runtime" "^7.11.2"
     less-loader "^6.2.0"
 
+gatsby-plugin-mini-css-class-name@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-mini-css-class-name/-/gatsby-plugin-mini-css-class-name-3.0.0.tgz#361ce94379768ac7f12ff1be8bc8f83e87087d4a"
+  integrity sha512-ADnDz5xPd1fmAQZ2LBVUT4TtRQkrw8OUk36Yr3fFitD30Y2SIl284YBxMXn8Nqwrmeo5a9BeEqsPw211SHWyaQ==
+  dependencies:
+    mini-css-class-name "^0.10.0"
+
+gatsby-plugin-no-javascript-utils@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-no-javascript-utils/-/gatsby-plugin-no-javascript-utils-0.5.0.tgz#f3daae4883c7b2859070ce9099fede4b38b3791f"
+  integrity sha512-HkdFdLu5qJvJA4b6E7Sb9ZffdhBXT73fS8lKYQypEsteFw+BMADPLuh7c/7EGcKnhcQ+a4lgc6QJTaDfDckNnQ==
+
 gatsby-plugin-no-javascript@2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-no-javascript/-/gatsby-plugin-no-javascript-2.0.5.tgz#b30bd412fabeab1663b6c40a3aaeee878acfddea"
@@ -13043,6 +13055,11 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.0.tgz#cfc45c37e9ec0d8f0a0ec3dd4ef7f7c3abe39256"
   integrity sha1-z8RcN+nsDY8KDsPdTvf3w6vjklY=
 
+mini-css-class-name@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/mini-css-class-name/-/mini-css-class-name-0.10.0.tgz#980ef9faec304bba2ef39d8592f100e84180bbda"
+  integrity sha512-HtCFkzfL4eeXB4FrU/reSeRZSxkCaj+8LMABHJvp3EXSQvRHLsNm3T5sdTiNOGZqCUImiekqaxYorT2IVBa6iQ==
+
 mini-css-extract-plugin@^0.11.2:
   version "0.11.3"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz#15b0910a7f32e62ffde4a7430cfefbd700724ea6"