Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Sep 6, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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).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({
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`:
case `develop-html`:
return `development`
case `build-javascript`:
case `build-html`:
return `development` // So we don't uglify the html bundle
return `production`
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should use production builds and just put the minimizer to false

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 === `build-html`) {
config.optimization = {
minimize: false,
}
}

Expand Down