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

edge-ssr: bundle next/dist as ESM for better tree-shaking #40251

Merged
merged 39 commits into from Sep 26, 2022
Merged
Show file tree
Hide file tree
Changes from 38 commits
Commits
Show all changes
39 commits
Select commit Hold shift + click to select a range
fc675ce
add esm targets
feedthejim Sep 5, 2022
1440ad2
rewrite loader requires
feedthejim Sep 5, 2022
90e6701
update pnpm lockfile
feedthejim Sep 6, 2022
29bceb8
chore: cleanup
feedthejim Sep 6, 2022
e18dde9
remove log
feedthejim Sep 13, 2022
5b26599
delete incorrect build artifacts
feedthejim Sep 13, 2022
66e4685
comment dist module swap
feedthejim Sep 13, 2022
299d206
fix dev mode
feedthejim Sep 14, 2022
c054002
revert pnpm lock file changes
feedthejim Sep 14, 2022
17e371c
add lib as a target
feedthejim Sep 14, 2022
9282e01
revert package.json modification
feedthejim Sep 14, 2022
6d5ef12
avoid adding cjs interop code for esm build
feedthejim Sep 14, 2022
8ec3a6e
fix type import in app.tsx
feedthejim Sep 14, 2022
17f2b71
update export client lib
feedthejim Sep 14, 2022
6a3d03f
Merge remote-tracking branch 'upstream/canary' into next-build-esm
feedthejim Sep 16, 2022
6fcb4d1
Merge branch 'canary' into next-build-esm
feedthejim Sep 19, 2022
f2dbf84
Merge remote-tracking branch 'upstream/canary' into next-build-esm
feedthejim Sep 19, 2022
c77fe29
transpile esm files through SWC
feedthejim Sep 19, 2022
75913c3
update caniuse
feedthejim Sep 19, 2022
87077b8
set caniuse version
feedthejim Sep 19, 2022
a183299
Merge branch 'update-caniuse' into next-build-esm
feedthejim Sep 19, 2022
af84a23
update compiled
ijjk Sep 21, 2022
3f8e343
Merge branch 'canary' into next-build-esm
ijjk Sep 21, 2022
027c6a2
update compiled
ijjk Sep 21, 2022
ed9d86d
add NEXT_RUNTIME='browser'
feedthejim Sep 22, 2022
f218521
Merge remote-tracking branch 'upstream/canary' into next-build-esm
feedthejim Sep 22, 2022
97b8e16
replace NEXT_RUNTIME: 'browser' with undefined
feedthejim Sep 22, 2022
a59d637
add ESM dist support for app loader modules
feedthejim Sep 22, 2022
fdad9c9
fix build
feedthejim Sep 22, 2022
c6fdad0
fix app loader param to use string instead of boolean
feedthejim Sep 22, 2022
712ef33
Merge remote-tracking branch 'upstream/canary' into next-build-esm
feedthejim Sep 26, 2022
23e2f1d
migrate new app loader hooks to use the esm module
feedthejim Sep 26, 2022
6b35ce7
generate different internal chunks for node and edge
shuding Sep 26, 2022
6d3efca
Merge remote-tracking branch 'upstream/canary' into next-build-esm
feedthejim Sep 26, 2022
ff03f4c
Merge remote-tracking branch 'upstream/canary' into next-build-esm
feedthejim Sep 26, 2022
237e7fa
update precompiled files
feedthejim Sep 26, 2022
0c97cba
fix telemetry
feedthejim Sep 26, 2022
5c32774
fix flight manifest for edge ssr
shuding Sep 26, 2022
58f653e
Merge branch 'canary' into next-build-esm
shuding Sep 26, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 4 additions & 1 deletion packages/next/amp.js
@@ -1 +1,4 @@
module.exports = require('./dist/shared/lib/amp')
module.exports =
process.env.NEXT_RUNTIME === 'edge'
? require('./dist/esm/shared/lib/amp')
: require('./dist/shared/lib/amp')
5 changes: 4 additions & 1 deletion packages/next/app.js
@@ -1 +1,4 @@
module.exports = require('./dist/pages/_app')
module.exports =
process.env.NEXT_RUNTIME === 'edge'
? require('./dist/esm/pages/_app')
: require('./dist/pages/_app')
3 changes: 3 additions & 0 deletions packages/next/build/entries.ts
Expand Up @@ -219,6 +219,7 @@ export function getAppEntry(opts: {
appDir: string
appPaths: string[] | null
pageExtensions: string[]
nextRuntime: string
}) {
return {
import: `next-app-loader?${stringify(opts)}!`,
Expand Down Expand Up @@ -455,6 +456,7 @@ export async function createEntrypoints(params: CreateEntrypointsParams) {
appDir,
appPaths: matchedAppPaths,
pageExtensions,
nextRuntime: 'nodejs',
})
} else if (isTargetLikeServerless(target)) {
if (page !== '/_app' && page !== '/_document') {
Expand All @@ -479,6 +481,7 @@ export async function createEntrypoints(params: CreateEntrypointsParams) {
appDir: appDir!,
appPaths: matchedAppPaths,
pageExtensions,
nextRuntime: 'edge',
}).import
}

Expand Down
24 changes: 13 additions & 11 deletions packages/next/build/webpack-config.ts
Expand Up @@ -139,11 +139,9 @@ export function getDefineEnv({
}),
// TODO: enforce `NODE_ENV` on `process.env`, and add a test:
'process.env.NODE_ENV': JSON.stringify(dev ? 'development' : 'production'),
...((isNodeServer || isEdgeServer) && {
'process.env.NEXT_RUNTIME': JSON.stringify(
isEdgeServer ? 'edge' : 'nodejs'
),
}),
'process.env.NEXT_RUNTIME': JSON.stringify(
isEdgeServer ? 'edge' : isNodeServer ? 'nodejs' : undefined
),
'process.env.__NEXT_MIDDLEWARE_MATCHERS': JSON.stringify(
middlewareMatchers || []
),
Expand Down Expand Up @@ -685,9 +683,9 @@ export default async function getBaseWebpackConfig(
const pageExtensions = config.pageExtensions

const babelIncludeRegexes: RegExp[] = [
/next[\\/]dist[\\/]shared[\\/]lib/,
/next[\\/]dist[\\/]client/,
/next[\\/]dist[\\/]pages/,
/next[\\/]dist[\\/](esm[\\/])?shared[\\/]lib/,
/next[\\/]dist[\\/](esm[\\/])?client/,
/next[\\/]dist[\\/](esm[\\/])?pages/,
/[\\/](strip-ansi|ansi-regex)[\\/]/,
/styled-jsx[\\/]/,
]
Expand Down Expand Up @@ -796,7 +794,7 @@ export default async function getBaseWebpackConfig(
return prev
}, [] as string[])
: []),
'next/dist/pages/_app.js',
isEdgeServer ? 'next/dist/esm/pages/_app.js' : 'next/dist/pages/_app.js',
]
customAppAliases[`${PAGES_DIR_ALIAS}/_error`] = [
...(pagesDir
Expand All @@ -805,7 +803,9 @@ export default async function getBaseWebpackConfig(
return prev
}, [] as string[])
: []),
'next/dist/pages/_error.js',
isEdgeServer
? 'next/dist/esm/pages/_error.js'
: 'next/dist/pages/_error.js',
]
customDocumentAliases[`${PAGES_DIR_ALIAS}/_document`] = [
...(pagesDir
Expand All @@ -814,7 +814,9 @@ export default async function getBaseWebpackConfig(
return prev
}, [] as string[])
: []),
`next/dist/pages/_document.js`,
isEdgeServer
? `next/dist/esm/pages/_document.js`
: `next/dist/pages/_document.js`,
]
}

Expand Down
18 changes: 10 additions & 8 deletions packages/next/build/webpack/loaders/next-app-loader.ts
Expand Up @@ -120,8 +120,9 @@ const nextAppLoader: webpack.LoaderDefinitionFunction<{
appDir: string
appPaths: string[] | null
pageExtensions: string[]
nextRuntime: string
}> = async function nextAppLoader() {
const { name, appDir, appPaths, pagePath, pageExtensions } =
const { name, appDir, appPaths, pagePath, pageExtensions, nextRuntime } =
this.getOptions() || {}

const buildInfo = getModuleBuildInfo((this as any)._module)
Expand Down Expand Up @@ -179,23 +180,24 @@ const nextAppLoader: webpack.LoaderDefinitionFunction<{
resolveParallelSegments,
})

const rootDistFolder = nextRuntime === 'edge' ? 'next/dist/esm' : 'next/dist'
const result = `
export ${treeCode}

export const AppRouter = require('next/dist/client/components/app-router.client.js').default
export const LayoutRouter = require('next/dist/client/components/layout-router.client.js').default
export const RenderFromTemplateContext = require('next/dist/client/components/render-from-template-context.client.js').default
export const AppRouter = require('${rootDistFolder}/client/components/app-router.client.js').default
export const LayoutRouter = require('${rootDistFolder}/client/components/layout-router.client.js').default
export const RenderFromTemplateContext = require('${rootDistFolder}/client/components/render-from-template-context.client.js').default
export const HotReloader = ${
// Disable HotReloader component in production
this.mode === 'development'
? `require('next/dist/client/components/hot-reloader.client.js').default`
? `require('${rootDistFolder}/client/components/hot-reloader.client.js').default`
: 'null'
}

export const staticGenerationAsyncStorage = require('next/dist/client/components/static-generation-async-storage.js').staticGenerationAsyncStorage
export const requestAsyncStorage = require('next/dist/client/components/request-async-storage.js').requestAsyncStorage
export const staticGenerationAsyncStorage = require('${rootDistFolder}/client/components/static-generation-async-storage.js').staticGenerationAsyncStorage
export const requestAsyncStorage = require('${rootDistFolder}/client/components/request-async-storage.js').requestAsyncStorage

export const serverHooks = require('next/dist/client/components/hooks-server-context.js')
export const serverHooks = require('${rootDistFolder}/client/components/hooks-server-context.js')

export const renderToReadableStream = require('next/dist/compiled/react-server-dom-webpack/writer.browser.server').renderToReadableStream
export const __next_app_webpack_require__ = __webpack_require__
Expand Down
Expand Up @@ -18,6 +18,18 @@ export type EdgeSSRLoaderQuery = {
hasFontLoaders: boolean
}

/*
For pages SSR'd at the edge, we bundle them with the ESM version of Next in order to
benefit from the better tree-shaking and thus, smaller bundle sizes.
The absolute paths for _app, _error and _document, used in this loader, link to the regular CJS modules.
They are generated in `createPagesMapping` where we don't have access to `isEdgeRuntime`,
so we have to do it here. It's not that bad because it keeps all references to ESM modules magic in this place.
*/
function swapDistFolderWithEsmDistFolder(path: string) {
return path.replace('next/dist/pages', 'next/dist/esm/pages')
}

export default async function edgeSSRLoader(this: any) {
const {
dev,
Expand Down Expand Up @@ -54,9 +66,18 @@ export default async function edgeSSRLoader(this: any) {
}

const stringifiedPagePath = stringifyRequest(this, absolutePagePath)
const stringifiedAppPath = stringifyRequest(this, absoluteAppPath)
const stringifiedErrorPath = stringifyRequest(this, absoluteErrorPath)
const stringifiedDocumentPath = stringifyRequest(this, absoluteDocumentPath)
const stringifiedAppPath = stringifyRequest(
this,
swapDistFolderWithEsmDistFolder(absoluteAppPath)
)
const stringifiedErrorPath = stringifyRequest(
this,
swapDistFolderWithEsmDistFolder(absoluteErrorPath)
)
const stringifiedDocumentPath = stringifyRequest(
this,
swapDistFolderWithEsmDistFolder(absoluteDocumentPath)
)
const stringified500Path = absolute500Path
? stringifyRequest(this, absolute500Path)
: null
Expand All @@ -67,8 +88,8 @@ export default async function edgeSSRLoader(this: any) {
)}`

const transformed = `
import { adapter, enhanceGlobals } from 'next/dist/server/web/adapter'
import { getRender } from 'next/dist/build/webpack/loaders/next-edge-ssr-loader/render'
import { adapter, enhanceGlobals } from 'next/dist/esm/server/web/adapter'
import { getRender } from 'next/dist/esm/build/webpack/loaders/next-edge-ssr-loader/render'
enhanceGlobals()
Expand All @@ -77,7 +98,7 @@ export default async function edgeSSRLoader(this: any) {
isAppDir
? `
const Document = null
const appRenderToHTML = require('next/dist/server/app-render').renderToHTMLOrFlight
const appRenderToHTML = require('next/dist/esm/server/app-render').renderToHTMLOrFlight
const pagesRenderToHTML = null
const pageMod = require(${JSON.stringify(pageModPath)})
const appMod = null
Expand All @@ -87,7 +108,7 @@ export default async function edgeSSRLoader(this: any) {
: `
const Document = require(${stringifiedDocumentPath}).default
const appRenderToHTML = null
const pagesRenderToHTML = require('next/dist/server/render').renderToHTML
const pagesRenderToHTML = require('next/dist/esm/server/render').renderToHTML
const pageMod = require(${stringifiedPagePath})
const appMod = require(${stringifiedAppPath})
const errorMod = require(${stringifiedErrorPath})
Expand Down
@@ -1,4 +1,5 @@
import type { NextConfig } from '../../../../server/config-shared'

import type { DocumentType, AppType } from '../../../../shared/lib/utils'
import type { BuildManifest } from '../../../../server/get-page-files'
import type { ReactLoadableManifest } from '../../../../server/load-components'
Expand Down
Expand Up @@ -286,9 +286,19 @@ export class FlightClientEntryPlugin {
modules: clientComponentImports,
server: false,
}
const clientLoader = `next-flight-client-entry-loader?${stringify(
loaderOptions
)}!`

// For the client entry, we always use the CJS build of Next.js. If the
// server is using the ESM build (when using the Edge runtime), we need to
// replace them.
const clientLoader = `next-flight-client-entry-loader?${stringify({
modules: this.isEdgeServer
? clientComponentImports.map((importPath) =>
importPath.replace('next/dist/esm/', 'next/dist/')
)
: clientComponentImports,
server: false,
})}!`

const clientSSRLoader = `next-flight-client-entry-loader?${stringify({
...loaderOptions,
server: true,
Expand Down
20 changes: 20 additions & 0 deletions packages/next/build/webpack/plugins/flight-manifest-plugin.ts
Expand Up @@ -50,6 +50,9 @@ export type FlightManifest = {
__ssr_module_mapping__: {
[moduleId: string]: ManifestNode
}
__edge_ssr_module_mapping__: {
[moduleId: string]: ManifestNode
}
} & {
[modulePath: string]: ManifestNode
}
Expand Down Expand Up @@ -102,6 +105,7 @@ export class FlightManifestPlugin {
) {
const manifest: FlightManifest = {
__ssr_module_mapping__: {},
__edge_ssr_module_mapping__: {},
}
const dev = this.dev

Expand Down Expand Up @@ -166,6 +170,7 @@ export class FlightManifestPlugin {

const moduleExports = manifest[resource] || {}
const moduleIdMapping = manifest.__ssr_module_mapping__
const edgeModuleIdMapping = manifest.__edge_ssr_module_mapping__

// Note that this isn't that reliable as webpack is still possible to assign
// additional queries to make sure there's no conflict even using the `named`
Expand Down Expand Up @@ -268,10 +273,25 @@ export class FlightManifestPlugin {
...moduleExports[name],
id: ssrNamedModuleId,
}

edgeModuleIdMapping[id] = edgeModuleIdMapping[id] || {}
edgeModuleIdMapping[id][name] = {
...moduleExports[name],
id: ssrNamedModuleId.replace(/\/next\/dist\//, '/next/dist/esm/'),
}
})

manifest[resource] = moduleExports

// The client compiler will always use the CJS Next.js build, so here we
// also add the mapping for the ESM build (Edge runtime) to consume.
if (/\/next\/dist\//.test(resource)) {
manifest[resource.replace(/\/next\/dist\//, '/next/dist/esm/')] =
moduleExports
}

manifest.__ssr_module_mapping__ = moduleIdMapping
manifest.__edge_ssr_module_mapping__ = edgeModuleIdMapping
}

chunkGroup.chunks.forEach((chunk: webpack.Chunk) => {
Expand Down
14 changes: 10 additions & 4 deletions packages/next/build/webpack/plugins/telemetry-plugin.ts
Expand Up @@ -110,11 +110,15 @@ function findFeatureInModule(module: Module): Feature | undefined {
* dependency.
*/
function findUniqueOriginModulesInConnections(
connections: Connection[]
connections: Connection[],
originModule: Module
): Set<unknown> {
const originModules = new Set()
for (const connection of connections) {
if (!originModules.has(connection.originModule)) {
if (
!originModules.has(connection.originModule) &&
connection.originModule !== originModule
) {
originModules.add(connection.originModule)
}
}
Expand Down Expand Up @@ -161,8 +165,10 @@ export class TelemetryPlugin implements webpack.WebpackPluginInstance {
const connections = (
compilation as any
).moduleGraph.getIncomingConnections(module)
const originModules =
findUniqueOriginModulesInConnections(connections)
const originModules = findUniqueOriginModulesInConnections(
connections,
module
)
this.usageTracker.get(feature)!.invocationCount =
originModules.size
}
Expand Down
5 changes: 4 additions & 1 deletion packages/next/client.js
@@ -1 +1,4 @@
module.exports = require('./dist/client/index')
module.exports =
process.env.NEXT_RUNTIME === 'edge'
feedthejim marked this conversation as resolved.
Show resolved Hide resolved
? require('./dist/esm/client/index')
: require('./dist/client/index')
6 changes: 3 additions & 3 deletions packages/next/compiled/@vercel/nft/index.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/next/compiled/ora/index.js

Large diffs are not rendered by default.

5 changes: 4 additions & 1 deletion packages/next/config.js
@@ -1 +1,4 @@
module.exports = require('./dist/shared/lib/runtime-config')
module.exports =
process.env.NEXT_RUNTIME === 'edge'
? require('./dist/esm/shared/lib/runtime-config')
: require('./dist/shared/lib/runtime-config')
5 changes: 4 additions & 1 deletion packages/next/constants.js
@@ -1 +1,4 @@
module.exports = require('./dist/shared/lib/constants')
module.exports =
process.env.NEXT_RUNTIME === 'edge'
? require('./dist/esm/shared/lib/constants')
: require('./dist/shared/lib/constants')
5 changes: 4 additions & 1 deletion packages/next/document.js
@@ -1 +1,4 @@
module.exports = require('./dist/pages/_document')
module.exports =
process.env.NEXT_RUNTIME === 'edge'
? require('./dist/esm/pages/_document')
: require('./dist/pages/_document')
5 changes: 4 additions & 1 deletion packages/next/dynamic.js
@@ -1 +1,4 @@
module.exports = require('./dist/shared/lib/dynamic')
module.exports =
process.env.NEXT_RUNTIME === 'edge'
? require('./dist/esm/shared/lib/dynamic')
: require('./dist/shared/lib/dynamic')
5 changes: 4 additions & 1 deletion packages/next/error.js
@@ -1 +1,4 @@
module.exports = require('./dist/pages/_error')
module.exports =
process.env.NEXT_RUNTIME === 'edge'
? require('./dist/esm/pages/_error')
: require('./dist/pages/_error')
5 changes: 4 additions & 1 deletion packages/next/head.js
@@ -1 +1,4 @@
module.exports = require('./dist/shared/lib/head')
module.exports =
process.env.NEXT_RUNTIME === 'edge'
? require('./dist/esm/shared/lib/head')
: require('./dist/shared/lib/head')
5 changes: 4 additions & 1 deletion packages/next/image.js
@@ -1 +1,4 @@
module.exports = require('./dist/client/image')
module.exports =
process.env.NEXT_RUNTIME === 'edge'
? require('./dist/esm/client/image')
: require('./dist/client/image')
5 changes: 4 additions & 1 deletion packages/next/link.js
@@ -1 +1,4 @@
module.exports = require('./dist/client/link')
module.exports =
process.env.NEXT_RUNTIME === 'edge'
? require('./dist/esm/client/link')
: require('./dist/client/link')
6 changes: 4 additions & 2 deletions packages/next/pages/_app.tsx
@@ -1,6 +1,6 @@
import React from 'react'
import {
loadGetInitialProps,

import type {
AppContextType,
AppInitialProps,
AppPropsType,
Expand All @@ -9,6 +9,8 @@ import {
} from '../shared/lib/utils'
import type { Router } from '../client/router'

import { loadGetInitialProps } from '../shared/lib/utils'

export { AppInitialProps, AppType }

export { NextWebVitalsMetric }
Expand Down
5 changes: 4 additions & 1 deletion packages/next/router.js
@@ -1 +1,4 @@
module.exports = require('./dist/client/router')
module.exports =
process.env.NEXT_RUNTIME === 'edge'
? require('./dist/esm/client/router')
: require('./dist/client/router')