Strip internal pages for pagesDir in app edge ssr (#40776)

For app edge SSR, we don't need any internal pages for it since it's handled by app-renderer. This results around reducing 20KB from app edge SSR # Changes * Strip those internal pages modules when it's in app edge SSR * Minimize edge SSR chunk to see the tree-shake result * Add bundle analyzer with switcher in stats-app for testing. Using `TEST_ANAYLYSE=1` to build stats-app for testing
vercel · Sep 22, 2022 · cbfab2a · cbfab2a
1 parent 69595ad
commit cbfab2a
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 23 deletions.
diff --git a/.github/actions/next-stats-action/src/run/index.js b/.github/actions/next-stats-action/src/run/index.js
@@ -253,9 +253,13 @@ async function linkPkgs(pkgDir = '', pkgPaths) {
   await fs.writeFile(pkgJsonPath, JSON.stringify(pkgData, null, 2), 'utf8')
 
   await fs.remove(yarnEnvValues.YARN_CACHE_FOLDER)
-  await exec(`cd ${pkgDir} && pnpm install`, false, {
-    env: yarnEnvValues,
-  })
+  await exec(
+    `cd ${pkgDir} && pnpm install --strict-peer-dependencies=false`,
+    false,
+    {
+      env: yarnEnvValues,
+    }
+  )
 }
 
 module.exports = runConfigs
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -1401,7 +1401,7 @@ export default async function getBaseWebpackConfig(
       runtimeChunk: isClient
         ? { name: CLIENT_STATIC_FILES_RUNTIME_WEBPACK }
         : undefined,
-      minimize: !dev && isClient,
+      minimize: !dev && (isClient || isEdgeServer),
       minimizer: [
         // Minify JavaScript
         (compiler: webpack.Compiler) => {

diff --git a/packages/next/build/webpack/loaders/next-edge-ssr-loader/index.ts b/packages/next/build/webpack/loaders/next-edge-ssr-loader/index.ts
@@ -68,29 +68,33 @@ export default async function edgeSSRLoader(this: any) {
     import { adapter, enhanceGlobals } from 'next/dist/server/web/adapter'
     import { getRender } from 'next/dist/build/webpack/loaders/next-edge-ssr-loader/render'
 
-    import Document from ${stringifiedDocumentPath}
-
     enhanceGlobals()
 
+    const pageType = ${JSON.stringify(pagesType)}
     ${
       isAppDir
         ? `
+      const Document = null
       const appRenderToHTML = require('next/dist/server/app-render').renderToHTMLOrFlight
       const pagesRenderToHTML = null
       const pageMod = require(${JSON.stringify(pageModPath)})
+      const appMod = null
+      const errorMod = null
+      const error500Mod = null
     `
         : `
+      const Document = require(${stringifiedDocumentPath}).default
       const appRenderToHTML = null
       const pagesRenderToHTML = require('next/dist/server/render').renderToHTML
       const pageMod = require(${stringifiedPagePath})
+      const appMod = require(${stringifiedAppPath})
+      const errorMod = require(${stringifiedErrorPath})
+      const error500Mod = ${
+        stringified500Path ? `require(${stringified500Path})` : 'null'
+      }
     `
     }
 
-    const appMod = require(${stringifiedAppPath})
-    const errorMod = require(${stringifiedErrorPath})
-    const error500Mod = ${
-      stringified500Path ? `require(${stringified500Path})` : 'null'
-    }
 
     const buildManifest = self.__BUILD_MANIFEST
     const reactLoadableManifest = self.__REACT_LOADABLE_MANIFEST
@@ -101,6 +105,7 @@ export default async function edgeSSRLoader(this: any) {
     }
 
     const render = getRender({
+      pageType,
       dev: ${dev},
       page: ${JSON.stringify(page)},
       appMod,

diff --git a/packages/next/build/webpack/loaders/next-edge-ssr-loader/render.ts b/packages/next/build/webpack/loaders/next-edge-ssr-loader/render.ts
@@ -17,6 +17,7 @@ export function getRender({
   pageMod,
   errorMod,
   error500Mod,
+  pagesType,
   Document,
   buildManifest,
   reactLoadableManifest,
@@ -28,6 +29,7 @@ export function getRender({
   config,
   buildId,
 }: {
+  pagesType?: 'app' | 'pages' | 'root'
   dev: boolean
   page: string
   appMod: any
@@ -46,13 +48,14 @@ export function getRender({
   config: NextConfig
   buildId: string
 }) {
+  const isAppPath = pagesType === 'app'
   const baseLoadComponentResult = {
     dev,
     buildManifest,
     reactLoadableManifest,
     subresourceIntegrityManifest,
     Document,
-    App: appMod.default as AppType,
+    App: appMod?.default as AppType,
   }
 
   const server = new WebServer({
@@ -72,6 +75,7 @@ export function getRender({
       appRenderToHTML,
       pagesRenderToHTML,
       loadComponent: async (pathname) => {
+        if (isAppPath) return null
         if (pathname === page) {
           return {
             ...baseLoadComponentResult,

diff --git a/test/.stats-app/app/app-edge-ssr/page.js b/test/.stats-app/app/app-edge-ssr/page.js
@@ -0,0 +1,7 @@
+export default function page() {
+  return 'edge-ssr'
+}
+
+export const config = {
+  runtime: 'experimental-edge',
+}
diff --git a/test/.stats-app/next.config.js b/test/.stats-app/next.config.js
@@ -0,0 +1,9 @@
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: !!process.env.TEST_ANALYZE,
+})
+
+module.exports = withBundleAnalyzer({
+  experimental: {
+    appDir: true,
+  },
+})
diff --git a/test/.stats-app/package.json b/test/.stats-app/package.json
@@ -4,7 +4,7 @@
   "license": "MIT",
   "dependencies": {
     "next": "latest",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react": "experimental",
+    "react-dom": "experimental"
   }
 }
diff --git a/test/.stats-app/pages/edge-ssr.js b/test/.stats-app/pages/edge-ssr.js
@@ -2,12 +2,6 @@ export default function page() {
   return 'edge-ssr'
 }
 
-export async function getServerSideProps() {
-  return {
-    props: {},
-  }
-}
-
 export const config = {
   runtime: 'experimental-edge',
 }
diff --git a/test/.stats-app/stats-config.js b/test/.stats-app/stats-config.js
@@ -32,8 +32,11 @@ const clientGlobs = [
     globs: ['fetched-pages/**/*.html'],
   },
   {
-    name: 'Edge SSR Page bundle Size',
-    globs: ['.next/server/pages/edge-ssr.js'],
+    name: 'Edge SSR bundle Size',
+    globs: [
+      '.next/server/pages/edge-ssr.js',
+      '.next/server/app/app-edge-ssr/page.js',
+    ],
   },
   {
     name: 'Middleware size',
@@ -89,6 +92,9 @@ module.exports = {
           path: 'next.config.js',
           content: `
             module.exports = {
+              experimental: {
+                appDir: true,
+              },
               generateBuildId: () => 'BUILD_ID',
               webpack(config) {
                 config.optimization.minimize = false
@@ -109,7 +115,10 @@ module.exports = {
         {
           path: 'next.config.js',
           content: `
-            module.exports = {
+          module.exports = {
+              experimental: {
+                appDir: true,
+              },
               generateBuildId: () => 'BUILD_ID'
             }
           `,
@@ -144,6 +153,9 @@ module.exports = {
           path: 'next.config.js',
           content: `
             module.exports = {
+              experimental: {
+                appDir: true,
+              },
               generateBuildId: () => 'BUILD_ID',
               swcMinify: true,
               webpack(config) {
@@ -166,6 +178,9 @@ module.exports = {
           path: 'next.config.js',
           content: `
             module.exports = {
+              experimental: {
+                appDir: true,
+              },
               swcMinify: true,
               generateBuildId: () => 'BUILD_ID'
             }