perf: 50% faster compilation speed by skipping bundling of server-only packages during dev (#11594)

This PR skips bundling server-only payload packages during development, which results in 50% faster compilation speeds using turbo.

Test results using our blank template (both /api and /admin):

Webpack before: 11.5
Webpack now: 7.1s
=> 38% faster compilation speed

Turbopack before: 4.1s
Turbopack after: 2.1s
=> 50% faster compilation speed

next.config.mjs

@@ -12,7 +12,8 @@ const withBundleAnalyzer = bundleAnalyzer({
 })
 
 const config = withBundleAnalyzer(
-  withPayload({
+  withPayload(
+    {
       eslint: {
         ignoreDuringBuilds: true,
       },
@@ -59,7 +60,9 @@ const config = withBundleAnalyzer(
 
         return webpackConfig
       },
-  }),
+    },
+    { devBundleServerPackages: false },
+  ),
 )
 
 export default process.env.NEXT_PUBLIC_SENTRY_DSN

packages/next/src/withPayload.js

@@ -1,9 +1,11 @@
 /**
  * @param {import('next').NextConfig} nextConfig
+ * @param {Object} [options] - Optional configuration options
+ * @param {boolean} [options.devBundleServerPackages] - Whether to bundle server packages in development mode. @default true
  *
  * @returns {import('next').NextConfig}
  * */
-export const withPayload = (nextConfig = {}) => {
+export const withPayload = (nextConfig = {}, options = {}) => {
   const env = nextConfig?.env || {}
 
   if (nextConfig.experimental?.staleTimes?.dynamic) {
@@ -99,6 +101,32 @@ export const withPayload = (nextConfig = {}) => {
       'libsql',
       'pino-pretty',
       'graphql',
+      // Do not bundle server-only packages during dev to improve compile speed
+      ...(process.env.npm_lifecycle_event === 'dev' && options.devBundleServerPackages === false
+        ? [
+            'payload',
+            '@payloadcms/db-mongodb',
+            '@payloadcms/db-postgres',
+            '@payloadcms/db-sqlite',
+            '@payloadcms/db-vercel-postgres',
+            '@payloadcms/drizzle',
+            '@payloadcms/email-nodemailer',
+            '@payloadcms/email-resend',
+            '@payloadcms/graphql',
+            '@payloadcms/payload-cloud',
+            '@payloadcms/plugin-cloud-storage',
+            '@payloadcms/plugin-redirects',
+            '@payloadcms/plugin-sentry',
+            '@payloadcms/plugin-stripe',
+            // TODO: Add the following packages, excluding their /client subpath exports, once Next.js supports it
+            // @payloadcms/richtext-lexical
+            //'@payloadcms/storage-azure',
+            //'@payloadcms/storage-gcs',
+            //'@payloadcms/storage-s3',
+            //'@payloadcms/storage-uploadthing',
+            //'@payloadcms/storage-vercel-blob',
+          ]
+        : []),
     ],
     webpack: (webpackConfig, webpackOptions) => {
       const incomingWebpackConfig =

packages/payload-cloud/src/utilities/refreshSession.ts

@@ -1,12 +1,12 @@
 import { CognitoIdentityClient } from '@aws-sdk/client-cognito-identity'
-import * as AWS from '@aws-sdk/client-s3'
+import { S3 } from '@aws-sdk/client-s3'
 import { fromCognitoIdentityPool } from '@aws-sdk/credential-providers'
 
 import { authAsCognitoUser } from './authAsCognitoUser.js'
 
 export type GetStorageClient = () => Promise<{
   identityID: string
-  storageClient: AWS.S3
+  storageClient: S3
 }>
 
 export const refreshSession = async () => {
@@ -33,7 +33,7 @@ export const refreshSession = async () => {
   // @ts-expect-error - Incorrect AWS types
   const identityID = credentials.identityId
 
-  const storageClient = new AWS.S3({
+  const storageClient = new S3({
     credentials,
     region: process.env.PAYLOAD_CLOUD_BUCKET_REGION,
   })

templates/_template/next.config.mjs

@@ -5,4 +5,4 @@ const nextConfig = {
   // Your Next.js config here
 }
 
-export default withPayload(nextConfig)
+export default withPayload(nextConfig, { devBundleServerPackages: false })

templates/blank/next.config.mjs

@@ -5,4 +5,4 @@ const nextConfig = {
   // Your Next.js config here
 }
 
-export default withPayload(nextConfig)
+export default withPayload(nextConfig, { devBundleServerPackages: false })

templates/plugin/dev/next.config.mjs

@@ -18,4 +18,4 @@ const nextConfig = {
   // transpilePackages: ['../src'],
 }
 
-export default withPayload(nextConfig)
+export default withPayload(nextConfig, { devBundleServerPackages: false })

templates/website/next.config.js

@@ -24,4 +24,4 @@ const nextConfig = {
   redirects,
 }
 
-export default withPayload(nextConfig)
+export default withPayload(nextConfig, { devBundleServerPackages: false })

templates/with-payload-cloud/next.config.mjs

@@ -5,4 +5,4 @@ const nextConfig = {
   // Your Next.js config here
 }
 
-export default withPayload(nextConfig)
+export default withPayload(nextConfig, { devBundleServerPackages: false })

templates/with-postgres/next.config.mjs

@@ -5,4 +5,4 @@ const nextConfig = {
   // Your Next.js config here
 }
 
-export default withPayload(nextConfig)
+export default withPayload(nextConfig, { devBundleServerPackages: false })

templates/with-vercel-mongodb/next.config.mjs

@@ -5,4 +5,4 @@ const nextConfig = {
   // Your Next.js config here
 }
 
-export default withPayload(nextConfig)
+export default withPayload(nextConfig, { devBundleServerPackages: false })

templates/with-vercel-postgres/next.config.mjs

@@ -5,4 +5,4 @@ const nextConfig = {
   // Your Next.js config here
 }
 
-export default withPayload(nextConfig)
+export default withPayload(nextConfig, { devBundleServerPackages: false })

templates/with-vercel-website/next.config.js

@@ -24,4 +24,4 @@ const nextConfig = {
   redirects,
 }
 
-export default withPayload(nextConfig)
+export default withPayload(nextConfig, { devBundleServerPackages: false })

test/next.config.mjs

@@ -12,7 +12,8 @@ const withBundleAnalyzer = bundleAnalyzer({
 })
 
 export default withBundleAnalyzer(
-  withPayload({
+  withPayload(
+    {
       eslint: {
         ignoreDuringBuilds: true,
       },
@@ -52,5 +53,7 @@ export default withBundleAnalyzer(
 
         return webpackConfig
       },
-  }),
+    },
+    { devBundleServerPackages: false },
+  ),
 )