removing p5 from import to rely on CDN

Author: runemadsen

gatsby-config.js

@@ -12,6 +12,8 @@ module.exports = {
     siteUrl: `https://processing.org/`
   },
   plugins: [
+    `gatsby-plugin-perf-budgets`,
+    `gatsby-plugin-webpack-bundle-analyser-v2`,
     `gatsby-plugin-react-helmet`,
     {
       resolve: `gatsby-theme-i18n`,

gatsby-ssr.js

@@ -0,0 +1,20 @@
+/**
+  Disable inline CSS. This brings the size of the reference from 100MB to 30MB,
+  just by removing inline CSS which already exists in stand-alone CSS files and
+  is only used to speed up initial rendering.
+**/
+export const onPreRenderHTML = ({ getHeadComponents }) => {
+  if (process.env.NODE_ENV !== 'production') {
+    return;
+  }
+  getHeadComponents().forEach((el) => {
+    if (el.type === 'style' && el.props['data-href']) {
+      el.type = 'link';
+      el.props['href'] = el.props['data-href'];
+      el.props['rel'] = 'stylesheet';
+      el.props['type'] = 'text/css';
+      delete el.props['data-href'];
+      delete el.props['dangerouslySetInnerHTML'];
+    }
+  });
+};

package-lock.json

@@ -63,7 +63,6 @@
     "highlight.js": "^11.2.0",
     "lodash": "4.17.21",
     "luxon": "^1.27.0",
-    "p5": "^1.4.0",
     "postcss": "^8.3.5",
     "postcss-calc": "^8.0.0",
     "postcss-custom-media": "^8.0.0",
@@ -85,6 +84,8 @@
     "@designsystemsinternational/static": "^3.3.12",
     "fast-glob": "^3.2.7",
     "fs-extra": "^10.0.0",
+    "gatsby-plugin-perf-budgets": "0.0.18",
+    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.25",
     "inquirer": "^8.1.2",
     "prettier": "2.0.5"
   },