fix(gatsby): reduce page-renderer-size (#33051)

Author: wardpeet

packages/gatsby/cache-dir/static-entry.js

@@ -6,9 +6,10 @@ const {
   pipeToNodeWritable,
 } = require(`react-dom/server`)
 const { ServerLocation, Router, isRedirect } = require(`@gatsbyjs/reach-router`)
-const { merge, flattenDeep, replace } = require(`lodash`)
+const merge = require(`deepmerge`)
 const { StaticQueryContext } = require(`gatsby`)
 const fs = require(`fs`)
+const { WritableAsPromise } = require(`./server-utils/writable-as-promise`)
 
 const { RouteAnnouncerProps } = require(`./route-announcer-props`)
 const { apiRunner, apiRunnerAsync } = require(`./api-runner-ssr`)
@@ -65,29 +66,40 @@ const getAppDataUrl = () =>
 const createElement = React.createElement
 
 export const sanitizeComponents = components => {
-  const componentsArray = ensureArray(components)
+  const componentsArray = [].concat(components).flat(Infinity).filter(Boolean)
+
   return componentsArray.map(component => {
     // Ensure manifest is always loaded from content server
     // And not asset server when an assetPrefix is used
     if (__ASSET_PREFIX__ && component.props.rel === `manifest`) {
       return React.cloneElement(component, {
-        href: replace(component.props.href, __ASSET_PREFIX__, ``),
+        href: component.props.href.replace(__ASSET_PREFIX__, ``),
       })
     }
     return component
   })
 }
 
-const ensureArray = components => {
-  if (Array.isArray(components)) {
-    // remove falsy items and flatten
-    return flattenDeep(
-      components.filter(val => (Array.isArray(val) ? val.length > 0 : val))
-    )
-  } else {
-    // we also accept single components, so we need to handle this case as well
-    return components ? [components] : []
+function deepMerge(a, b) {
+  const combineMerge = (target, source, options) => {
+    const destination = target.slice()
+
+    source.forEach((item, index) => {
+      if (typeof destination[index] === `undefined`) {
+        destination[index] = options.cloneUnlessOtherwiseSpecified(
+          item,
+          options
+        )
+      } else if (options.isMergeableObject(item)) {
+        destination[index] = merge(target[index], item, options)
+      } else if (target.indexOf(item) === -1) {
+        destination.push(item)
+      }
+    })
+    return destination
   }
+
+  return merge(a, b, { arrayMerge: combineMerge })
 }
 
 export default async function staticPage({
@@ -149,11 +161,13 @@ export default async function staticPage({
     }
 
     const setHtmlAttributes = attributes => {
-      htmlAttributes = merge(htmlAttributes, attributes)
+      // TODO - we should remove deep merges
+      htmlAttributes = deepMerge(htmlAttributes, attributes)
     }
 
     const setBodyAttributes = attributes => {
-      bodyAttributes = merge(bodyAttributes, attributes)
+      // TODO - we should remove deep merges
+      bodyAttributes = deepMerge(bodyAttributes, attributes)
     }
 
     const setPreBodyComponents = components => {
@@ -169,7 +183,8 @@ export default async function staticPage({
     }
 
     const setBodyProps = props => {
-      bodyProps = merge({}, bodyProps, props)
+      // TODO - we should remove deep merges
+      bodyProps = deepMerge({}, bodyProps, props)
     }
 
     const getHeadComponents = () => headComponents
@@ -266,9 +281,6 @@ export default async function staticPage({
       try {
         // react 18 enabled
         if (pipeToNodeWritable) {
-          const {
-            WritableAsPromise,
-          } = require(`./server-utils/writable-as-promise`)
           const writableStream = new WritableAsPromise()
           const { startWriting } = pipeToNodeWritable(
             bodyComponent,

packages/gatsby/package.json

@@ -51,6 +51,7 @@
     "css.escape": "^1.5.1",
     "date-fns": "^2.14.0",
     "debug": "^3.2.7",
+    "deepmerge": "^4.2.2",
     "del": "^5.1.0",
     "detect-port": "^1.3.0",
     "devcert": "^1.1.3",

packages/gatsby/src/internal-plugins/bundle-optimisations/gatsby-node.js

@@ -11,12 +11,24 @@ exports.onCreateWebpackConfig = function onCreateWebpackConfig({
   stage,
   actions,
 }) {
+  const objectAssignStub = path.join(__dirname, `polyfills/object-assign.js`)
+
   if (stage === `build-html` || stage === `develop-html`) {
+    actions.setWebpackConfig({
+      resolve: {
+        alias: {
+          // These files are already polyfilled so these should return in a no-op
+          // Stub Package: object.assign & object-assign
+          "object.assign": objectAssignStub,
+          "object-assign$": objectAssignStub,
+          "@babel/runtime/helpers/extends.js$": objectAssignStub,
+        },
+      },
+    })
     return
   }
 
   const noOp = path.join(__dirname, `polyfills/no-op.js`)
-  const objectAssignStub = path.join(__dirname, `polyfills/object-assign.js`)
   const fetchStub = path.join(__dirname, `polyfills/fetch.js`)
   const whatwgFetchStub = path.join(__dirname, `polyfills/whatwg-fetch.js`)
 

packages/gatsby/src/utils/webpack.config.js

@@ -302,12 +302,12 @@ module.exports = async (
 
   function getMode() {
     switch (stage) {
-      case `build-javascript`:
-        return `production`
       case `develop`:
       case `develop-html`:
+        return `development`
+      case `build-javascript`:
       case `build-html`:
-        return `development` // So we don't uglify the html bundle
+        return `production`
       default:
         return `production`
     }
@@ -531,6 +531,7 @@ module.exports = async (
   }
 
   const isCssModule = module => module.type === `css/mini-extract`
+
   if (stage === `develop`) {
     config.optimization = {
       splitChunks: {
@@ -564,7 +565,13 @@ module.exports = async (
           },
         },
       },
-      minimizer: [],
+      minimize: false,
+    }
+  }
+
+  if (stage === `build-html`) {
+    config.optimization = {
+      minimize: false,
     }
   }