Skip to content

Commit

Permalink
fix(gatsby): reduce page-renderer-size
Browse files Browse the repository at this point in the history
  • Loading branch information
wardpeet committed Sep 4, 2021
1 parent cb73a5a commit 9f40495
Show file tree
Hide file tree
Showing 4 changed files with 55 additions and 23 deletions.
48 changes: 30 additions & 18 deletions packages/gatsby/cache-dir/static-entry.js
Original file line number Diff line number Diff line change
Expand Up @@ -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`)
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -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 => {
Expand All @@ -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
Expand Down Expand Up @@ -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,
Expand Down
1 change: 1 addition & 0 deletions packages/gatsby/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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`)

Expand Down
15 changes: 11 additions & 4 deletions packages/gatsby/src/utils/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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`
}
Expand Down Expand Up @@ -531,6 +531,7 @@ module.exports = async (
}

const isCssModule = module => module.type === `css/mini-extract`

if (stage === `develop`) {
config.optimization = {
splitChunks: {
Expand Down Expand Up @@ -564,7 +565,13 @@ module.exports = async (
},
},
},
minimizer: [],
minimize: false,
}
}

if (stage === `develop-html` || stage === `build-html`) {
config.optimization = {
minimize: false,
}
}

Expand Down

0 comments on commit 9f40495

Please sign in to comment.