fix: enormous memory consumption of the dev server (#4148)

* fix: enormous dev server memory consumption

* chore: add changeset file

* add resolversDynamicImport configuration

* make vercel default to true

* imporve the changelog

* Update .changeset/good-oranges-pretend.md

* make code cleaner

* a fix and refactor

* fix build

---------

Co-authored-by: Siddharth Suresh <siddh.suresh@gmail.com>
Co-authored-by: Brandon Bayer <b@bayer.ws>

.changeset/good-oranges-pretend.md

@@ -0,0 +1,26 @@
+---
+"@blitzjs/rpc": patch
+---
+
+Fixes enormous memory consumption of the dev server by changing the default import strategy to "require" instead of "import" which in webpack causes multiple chunks to be created for each import.
+
+## Blitz Configuration
+
+To configure this behaviour, you can add the following to your next.config.js:
+
+```js
+/**
+ * @type {import('@blitzjs/next').BlitzConfig}
+ **/
+const config = {
+  blitz: {
+    resolversDynamicImport: true,
+  },
+}
+```
+
+When `resolversDynamicImport` is set to `true`, the import strategy will be "import" instead of "require".
+
+### On Vercel
+
+If you are using Vercel, `resolversDynamicImport` will be set to `true` by default, since it is better for the separate chunks to be create for serverless lambdas.

apps/toolkit-app/next.config.js

@@ -6,6 +6,9 @@ const { withBlitz } = require("@blitzjs/next")
  **/
 const config = {
   reactStrictMode: true,
+  blitz: {
+    resolversDynamicImport: true,
+  },
 }
 
 module.exports = withBlitz(withNextAuthAdapter(config))

packages/blitz-next/src/index-server.ts

@@ -230,6 +230,7 @@ export const setupBlitzServer = <TPlugins extends readonly BlitzServerPlugin<obj
 export interface BlitzConfig extends NextConfig {
   blitz?: {
     resolverPath?: ResolverPathOptions
+    resolversDynamicImport?: boolean
     includeRPCFolders?: string[]
     customServer?: {
       hotReload?: boolean
@@ -261,6 +262,8 @@ export function withBlitz(nextConfig: BlitzConfig = {}): NextConfig {
         webpackConfig: config,
         webpackRuleOptions: {
           resolverPath: nextConfig.blitz?.resolverPath,
+          resolversDynamicImport:
+            nextConfig.blitz?.resolversDynamicImport ?? Boolean(process.env.VERCEL),
           includeRPCFolders: nextConfig.blitz?.includeRPCFolders,
         },
       })

packages/blitz-rpc/src/index-server.ts

@@ -3,6 +3,7 @@ import {NextApiRequest, NextApiResponse} from "next"
 import {deserialize, parse, serialize as superjsonSerialize} from "superjson"
 import {resolve} from "path"
 import chalk from "chalk"
+import {LoaderOptions} from "./server/loader/utils/loader-utils"
 
 // TODO - optimize end user server bundles by not exporting all client stuff here
 export * from "./index-browser"
@@ -60,16 +61,11 @@ const loaderClient = resolve(dir, "./loader-client.cjs")
 const loaderServer = resolve(dir, "./loader-server.cjs")
 const loaderServerResolvers = resolve(dir, "./loader-server-resolvers.cjs")
 
-interface WebpackRuleOptions {
-  resolverPath: ResolverPathOptions | undefined
-  includeRPCFolders: string[] | undefined
-}
-
 interface WebpackRule {
   test: RegExp
   use: Array<{
     loader: string
-    options: WebpackRuleOptions
+    options: LoaderOptions
   }>
 }
 
@@ -84,7 +80,7 @@ export interface InstallWebpackConfigOptions {
       rules: WebpackRule[]
     }
   }
-  webpackRuleOptions: WebpackRuleOptions
+  webpackRuleOptions: LoaderOptions
 }
 
 export function installWebpackConfig({
@@ -165,6 +161,7 @@ export function rpcHandler(config: RpcConfig) {
     const routePath = "/" + relativeRoutePath
 
     const log = baseLogger().getSubLogger({
+      name: "blitz-rpc",
       prefix: [routePath.replace(/(\/api\/rpc)?\//, "") + "()"],
     })
     const customChalk = new chalk.Instance({
@@ -220,7 +217,7 @@ export function rpcHandler(config: RpcConfig) {
         const startTime = Date.now()
         const result = await resolver(data, (res as any).blitzCtx)
         const resolverDuration = Date.now() - startTime
-        log.debug(customChalk.dim("Result:"), result ? result : JSON.stringify(result))
+        log.info(customChalk.dim("Result:"), result ? result : JSON.stringify(result))
 
         const serializerStartTime = Date.now()
         const serializedResult = superjsonSerialize(result)
@@ -242,7 +239,7 @@ export function rpcHandler(config: RpcConfig) {
         const serializerDuration = Date.now() - serializerStartTime
         const duration = Date.now() - startTime
 
-        log.info(
+        log.debug(
           customChalk.dim(
             `Finished: resolver:${prettyMs(resolverDuration)} serializer:${prettyMs(
               serializerDuration,

packages/blitz-rpc/src/server/loader/server/loader-server.ts

@@ -64,12 +64,14 @@ export async function transformBlitzRpcServer(
       extraRpcBasePaths: options?.includeRPCFolders,
     })
 
-    code += `__internal_addBlitzRpcResolver('${routePath}',() => import('${slash(
+    const importStrategy = options?.resolversDynamicImport ? "import" : "require"
+
+    code += `__internal_addBlitzRpcResolver('${routePath}',() => ${importStrategy}('${slash(
       resolverFilePath,
     )}'));`
     code += "\n"
   }
-  // console.log("NEW CODE", code)
+
   return code
 }
 

packages/blitz-rpc/src/server/loader/utils/loader-utils.ts

@@ -3,8 +3,9 @@ import {posix, sep, win32, join, normalize} from "path"
 import {ResolverPathOptions} from "../../../index-server"
 
 export interface LoaderOptions {
-  resolverPath: ResolverPathOptions
+  resolverPath?: ResolverPathOptions
   includeRPCFolders?: string[]
+  resolversDynamicImport?: boolean
 }
 
 export interface Loader {

packages/blitz/src/logging.ts

@@ -22,15 +22,11 @@ export const baseLogger = (options: BlitzLoggerSettings = {}): Logger<ILogObj> =
 
 export const BlitzLogger = (settings: BlitzLoggerSettings = {}) => {
   const baseLogger = new Logger({
-    minLevel: 3,
-    type: "pretty",
-    prettyLogTemplate:
-      process.env.NODE_ENV === "production"
-        ? "{{yyyy}}-{{mm}}-{{dd}} {{hh}}:{{MM}}:{{ss}}:{{ms}}"
-        : "{{hh}}:{{MM}}:{{ss}}:{{ms}}",
     prettyLogTimeZone: process.env.NODE_ENV === "production" ? "UTC" : "local",
     maskValuesOfKeys: ["password", "passwordConfirmation", "currentPassword"],
-    // exposeErrorCodeFrame: process.env.NODE_ENV !== "production",
+    type: process.env.NODE_ENV === "production" ? "json" : "pretty",
+    prettyLogTemplate:
+      "{{yyyy}}.{{mm}}.{{dd}} {{hh}}:{{MM}}:{{ss}}:{{ms}}\t{{logLevelName}}\t[{{filePathWithLine}}{{name}}]\t",
     ...settings,
   })