From 9f40495f4e452e583bf7ba00ad93353eb736a513 Mon Sep 17 00:00:00 2001 From: Ward Peeters Date: Sat, 4 Sep 2021 17:50:49 +0200 Subject: [PATCH] fix(gatsby): reduce page-renderer-size --- packages/gatsby/cache-dir/static-entry.js | 48 ++++++++++++------- packages/gatsby/package.json | 1 + .../bundle-optimisations/gatsby-node.js | 14 +++++- packages/gatsby/src/utils/webpack.config.js | 15 ++++-- 4 files changed, 55 insertions(+), 23 deletions(-) diff --git a/packages/gatsby/cache-dir/static-entry.js b/packages/gatsby/cache-dir/static-entry.js index af702b2884f71..1155f8b45b470 100644 --- a/packages/gatsby/cache-dir/static-entry.js +++ b/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) + 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, diff --git a/packages/gatsby/package.json b/packages/gatsby/package.json index 607f482f8c754..4a790f710c1d3 100644 --- a/packages/gatsby/package.json +++ b/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", diff --git a/packages/gatsby/src/internal-plugins/bundle-optimisations/gatsby-node.js b/packages/gatsby/src/internal-plugins/bundle-optimisations/gatsby-node.js index d7e4fa752abe7..c01bf4f4e2ac5 100644 --- a/packages/gatsby/src/internal-plugins/bundle-optimisations/gatsby-node.js +++ b/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`) diff --git a/packages/gatsby/src/utils/webpack.config.js b/packages/gatsby/src/utils/webpack.config.js index 1611d4801424f..f8d1c7fb66cfc 100644 --- a/packages/gatsby/src/utils/webpack.config.js +++ b/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`: + return `development` + case `build-javascript`: case `develop-html`: 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 === `develop-html` || stage === `build-html`) { + config.optimization = { + minimize: false, } }