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.

Sign up for GitHub

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

Jump to bottom

Enable code splitting for the web runtime build #31090

Merged
merged 6 commits into from Nov 8, 2021
Merged

Enable code splitting for the web runtime build #31090

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
58a230f
enable splitChunks for the server-web build
shuding Nov 6, 2021
b41fbe7
Merge branch 'canary' into shu/6379
shuding Nov 6, 2021
88d849f
re-add polyfills
shuding Nov 6, 2021
03c4b49
remove unused
shuding Nov 6, 2021
9f95ae0
Merge branch 'canary' into shu/6379
shuding Nov 6, 2021
385144b
Merge branch 'canary' into shu/6379
shuding Nov 8, 2021
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
14 changes: 10 additions & 4 deletions packages/next/build/webpack-config.ts
View file
Open in desktop
Expand Up @@ -990,7 +990,12 @@ export default async function getBaseWebpackConfig(
? // make sure importing "next" is handled gracefully for client
// bundles in case a user imported types and it wasn't removed
// TODO: should we warn/error for this instead?
['next', ...(webServerRuntime ? [{ etag: '{}', chalk: '{}' }] : [])]
[
'next',
...(webServerRuntime
? [{ etag: '{}', chalk: '{}', 'react-dom': '{}' }]
: []),
]
: !isServerless
? [
({
Expand Down Expand Up @@ -1054,10 +1059,10 @@ export default async function getBaseWebpackConfig(
}
: {}),
splitChunks: isServer
? dev || webServerRuntime
? dev
? false
: ({
filename: '[name].js',
filename: webServerRuntime ? 'chunks/[name].js' : '[name].js',
// allow to split entrypoints
chunks: ({ name }: any) => !name?.match(MIDDLEWARE_ROUTE),
// size of files is not so relevant for server build
Expand Down Expand Up @@ -1465,7 +1470,8 @@ export default async function getBaseWebpackConfig(
new PagesManifestPlugin({ serverless: isLikeServerless, dev }),
// MiddlewarePlugin should be after DefinePlugin so NEXT_PUBLIC_*
// replacement is done before its process.env.* handling
!isServer && new MiddlewarePlugin({ dev }),
(!isServer || webServerRuntime) &&
new MiddlewarePlugin({ dev, webServerRuntime }),
isServer && new NextJsSsrImportPlugin(),
!isServer &&
new BuildManifestPlugin({
Expand Down
43 changes: 28 additions & 15 deletions packages/next/build/webpack/plugins/middleware-plugin.ts
View file
Open in desktop
Expand Up @@ -4,7 +4,6 @@ import { getSortedRoutes } from '../../../shared/lib/router/utils'
import {
MIDDLEWARE_MANIFEST,
MIDDLEWARE_FLIGHT_MANIFEST,
MIDDLEWARE_SSR_RUNTIME_WEBPACK,
MIDDLEWARE_BUILD_MANIFEST,
MIDDLEWARE_REACT_LOADABLE_MANIFEST,
} from '../../../shared/lib/constants'
Expand All @@ -31,11 +30,25 @@ export interface MiddlewareManifest {
}
}

const middlewareManifest: MiddlewareManifest = {
sortedMiddleware: [],
clientInfo: [],
middleware: {},
version: 1,
}
export default class MiddlewarePlugin {
dev: boolean

constructor({ dev }: { dev: boolean }) {
webServerRuntime: boolean

constructor({
dev,
webServerRuntime,
}: {
dev: boolean
webServerRuntime: boolean
}) {
this.dev = dev
this.webServerRuntime = webServerRuntime
}

createAssets(
Expand All @@ -44,17 +57,14 @@ export default class MiddlewarePlugin {
envPerRoute: Map<string, string[]>
) {
const entrypoints = compilation.entrypoints
const middlewareManifest: MiddlewareManifest = {
sortedMiddleware: [],
clientInfo: [],
middleware: {},
version: 1,
}

for (const entrypoint of entrypoints.values()) {
if (!entrypoint.name) continue
const result = MIDDLEWARE_FULL_ROUTE_REGEX.exec(entrypoint.name)

const ssrEntryInfo = ssrEntries.get(entrypoint.name)
if (ssrEntryInfo && !this.webServerRuntime) continue
if (!ssrEntryInfo && this.webServerRuntime) continue

const location = result
? `/${result[1]}`
Expand All @@ -67,14 +77,15 @@ export default class MiddlewarePlugin {
}
const files = ssrEntryInfo
? [
`server/${MIDDLEWARE_SSR_RUNTIME_WEBPACK}.js`,
ssrEntryInfo.requireFlightManifest
? `server/${MIDDLEWARE_FLIGHT_MANIFEST}.js`
: null,
`server/${MIDDLEWARE_BUILD_MANIFEST}.js`,
`server/${MIDDLEWARE_REACT_LOADABLE_MANIFEST}.js`,
`server/${entrypoint.name}.js`,
].filter(nonNullable)
...entrypoint.getFiles().map((file) => 'server/' + file),
]
.filter(nonNullable)
.filter((file: string) => !file.endsWith('.hot-update.js'))
: entrypoint
.getFiles()
.filter((file: string) => !file.endsWith('.hot-update.js'))
Expand Down Expand Up @@ -106,9 +117,11 @@ export default class MiddlewarePlugin {
}
)

assets[`server/${MIDDLEWARE_MANIFEST}`] = new sources.RawSource(
JSON.stringify(middlewareManifest, null, 2)
)
assets[
this.webServerRuntime
? MIDDLEWARE_MANIFEST
: `server/${MIDDLEWARE_MANIFEST}`
] = new sources.RawSource(JSON.stringify(middlewareManifest, null, 2))
}

apply(compiler: webpack5.Compiler) {
Expand Down