Add bundle analysis tools

gatsby-config.js

@@ -55,5 +55,15 @@ module.exports = {
       resolve: `gatsby-plugin-create-client-paths`,
       options: { prefixes: [`/edit/*`] },
     },
+    // bundle analysis
+    `gatsby-plugin-perf-budgets`, // located at /_report.html
+    {
+      resolve: "gatsby-plugin-webpack-bundle-analyser-v2",
+      options: {
+        // devMode: true,
+        // disable: true,
+        analyzerPort: 8001,
+      },
+    },
   ],
 }

gatsby-node.js

@@ -266,9 +266,6 @@ exports.createPages = async ({ graphql, actions }) => {
 }
 
 exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
-  actions.setWebpackConfig({
-    node: { fs: "empty" },
-  })
   if (stage === "build-html") {
     actions.setWebpackConfig({
       module: {

package.json

@@ -10,11 +10,12 @@
   "dependencies": {
     "@mapbox/geo-viewport": "^0.4.1",
     "@mapbox/mapbox-gl-draw": "^1.2.0",
-    "@quickbaseoss/babel-plugin-styled-components-css-namespace": "^1.0.1",
     "@reach/accordion": "^0.12.1",
     "@reach/listbox": "^0.12.1",
     "@reach/visually-hidden": "^0.12.0",
-    "@turf/turf": "^5.1.6",
+    "@turf/area": "^6.3.0",
+    "@turf/bbox": "^6.3.0",
+    "@turf/boolean-disjoint": "^6.3.0",
     "date-fns": "^2.16.1",
     "feedback-fish": "^0.2.3",
     "gatsby": "^3.2.1",
@@ -30,7 +31,6 @@
     "gatsby-transformer-json": "^3.2.0",
     "gatsby-transformer-sharp": "^3.2.0",
     "lodash.debounce": "^4.0.8",
-    "mapbox": "^1.0.0-beta10",
     "mapbox-gl": "^1.13.0",
     "nuka-carousel": "^4.7.4",
     "path-browserify": "^1.0.1",
@@ -47,6 +47,7 @@
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.4",
+    "@quickbaseoss/babel-plugin-styled-components-css-namespace": "^1.0.1",
     "@testing-library/cypress": "^7.0.5",
     "@testing-library/react-hooks": "^5.1.1",
     "axe-core": "^4.1.4",
@@ -66,6 +67,8 @@
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "gatsby-plugin-perf-budgets": "^0.0.17",
+    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.22",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "jest-styled-components": "^7.0.3",
@@ -112,4 +115,4 @@
   "bugs": {
     "url": "http://github.com/developmentseed/airborne-metadata-catalog-internal/issues"
   }
-}
+}

src/components/explore/explore-map.js

@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from "react"
 import PropTypes from "prop-types"
-import * as turf from "@turf/turf"
+import turfArea from "@turf/area"
+import turfBbox from "@turf/bbox"
+import turfBooleanDisjoint from "@turf/boolean-disjoint"
 import parse from "wellknown"
 
 import Map from "../map"
@@ -13,7 +15,7 @@ const sortFeaturesBySize = (a, b) => {
   // this is required by the hover effect:
   // to be able to select small features contained within others,
   // they need to be added to the map last
-  return turf.area(b.geometry) - turf.area(a.geometry)
+  return turfArea(b.geometry) - turfArea(a.geometry)
 }
 
 const ExploreMap = ({ allData, filteredData, setGeoFilter, aoi, setAoi }) => {
@@ -32,7 +34,7 @@ const ExploreMap = ({ allData, filteredData, setGeoFilter, aoi, setAoi }) => {
       }))
       .sort(sortFeaturesBySize),
   }))
-  const [bbox] = useState(() => turf.bbox(geojson))
+  const [bbox] = useState(() => turfBbox(geojson))
 
   useEffect(() => {
     // updates the map after a filter was changed
@@ -65,7 +67,7 @@ const ExploreMap = ({ allData, filteredData, setGeoFilter, aoi, setAoi }) => {
             shortname: d.shortname,
           },
         }))
-        .filter(feature => (aoi ? !turf.booleanDisjoint(feature, aoi) : true))
+        .filter(feature => (aoi ? !turfBooleanDisjoint(feature, aoi) : true))
         .map(f => f.properties.id)
     )
   }, [aoi])

src/templates/campaign/hero.js

@@ -3,7 +3,7 @@ import PropTypes from "prop-types"
 import { graphql } from "gatsby"
 import styled from "styled-components"
 import { GatsbyImage } from "gatsby-plugin-image"
-import * as turf from "@turf/turf"
+import turfBbox from "@turf/bbox"
 import parse from "wellknown"
 
 import { HeroStats } from "../../components/hero"
@@ -50,7 +50,7 @@ const CampaignHero = ({
     type: "Feature",
     geometry: parse(bounds),
   }
-  const bbox = turf.bbox(geojson)
+  const bbox = turfBbox(geojson)
 
   const containerRef = useRef()
   const { height } = useContainerDimensions(containerRef)