Apply optimization for unused actions (#69178)

vercel · Sep 3, 2024 · 9c4efb9 · 9c4efb9
1 parent 5eff016
commit 9c4efb9
Show file tree

Hide file tree

Showing 39 changed files with 841 additions and 24 deletions.
diff --git a/packages/next/src/build/webpack/plugins/flight-client-entry-plugin.ts b/packages/next/src/build/webpack/plugins/flight-client-entry-plugin.ts
diff --git a/test/production/app-dir/actions-tree-shaking/_testing/utils.ts b/test/production/app-dir/actions-tree-shaking/_testing/utils.ts
@@ -0,0 +1,78 @@
+import { type NextInstance } from 'e2e-utils'
+
+async function getActionsMappingByRuntime(
+  next: NextInstance,
+  runtime: 'node' | 'edge'
+) {
+  const manifest = JSON.parse(
+    await next.readFile('.next/server/server-reference-manifest.json')
+  )
+
+  return manifest[runtime]
+}
+
+export function markLayoutAsEdge(next: NextInstance) {
+  beforeAll(async () => {
+    await next.stop()
+    const layoutContent = await next.readFile('app/layout.js')
+    await next.patchFile(
+      'app/layout.js',
+      layoutContent + `\nexport const runtime = 'edge'`
+    )
+    await next.start()
+  })
+}
+
+/* 
+{ 
+  [route path]: { [layer]: Set<workerId> ]
+}
+*/
+type ActionsMappingOfRuntime = {
+  [actionId: string]: {
+    workers: {
+      [route: string]: string
+    }
+    layer: {
+      [route: string]: string
+    }
+  }
+}
+type ActionState = {
+  [route: string]: {
+    [layer: string]: number
+  }
+}
+
+function getActionsRoutesState(
+  actionsMappingOfRuntime: ActionsMappingOfRuntime
+): ActionState {
+  const state: ActionState = {}
+  Object.keys(actionsMappingOfRuntime).forEach((actionId) => {
+    const action = actionsMappingOfRuntime[actionId]
+    const routePaths = Object.keys(action.workers)
+
+    routePaths.forEach((routePath) => {
+      if (!state[routePath]) {
+        state[routePath] = {}
+      }
+      const layer = action.layer[routePath]
+
+      if (!state[routePath][layer]) {
+        state[routePath][layer] = 0
+      }
+
+      state[routePath][layer]++
+    })
+  })
+
+  return state
+}
+
+export async function getActionsRoutesStateByRuntime(next: NextInstance) {
+  const actionsMappingOfRuntime = await getActionsMappingByRuntime(
+    next,
+    process.env.TEST_EDGE ? 'edge' : 'node'
+  )
+  return getActionsRoutesState(actionsMappingOfRuntime)
+}
diff --git a/test/production/app-dir/actions-tree-shaking/basic/app/actions.js b/test/production/app-dir/actions-tree-shaking/basic/app/actions.js
@@ -0,0 +1,13 @@
+'use server'
+
+export async function serverComponentAction() {
+  return 'server-action'
+}
+
+export async function clientComponentAction() {
+  return 'client-action'
+}
+
+export async function unusedExportedAction() {
+  return 'unused-exported-action'
+}
diff --git a/test/production/app-dir/actions-tree-shaking/basic/app/client/page.js b/test/production/app-dir/actions-tree-shaking/basic/app/client/page.js
@@ -0,0 +1,21 @@
+'use client'
+
+import { useState } from 'react'
+import { clientComponentAction } from '../actions'
+
+export default function Page() {
+  const [text, setText] = useState('initial')
+  return (
+    <div>
+      <button
+        id="action-1"
+        onClick={async () => {
+          setText(await clientComponentAction())
+        }}
+      >
+        Action 1
+      </button>
+      <span>{text}</span>
+    </div>
+  )
+}
diff --git a/test/production/app-dir/actions-tree-shaking/basic/app/inline/page.js b/test/production/app-dir/actions-tree-shaking/basic/app/inline/page.js
@@ -0,0 +1,13 @@
+export default function Page() {
+  // Inline Server Action
+  async function inlineServerAction() {
+    'use server'
+    return 'inline-server-action'
+  }
+
+  return (
+    <form action={inlineServerAction}>
+      <button type="submit">Submit</button>
+    </form>
+  )
+}
diff --git a/test/production/app-dir/actions-tree-shaking/basic/app/layout.js b/test/production/app-dir/actions-tree-shaking/basic/app/layout.js
@@ -0,0 +1,7 @@
+export default function Layout({ children }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/production/app-dir/actions-tree-shaking/basic/app/server/page.js b/test/production/app-dir/actions-tree-shaking/basic/app/server/page.js
@@ -0,0 +1,10 @@
+import { serverComponentAction } from '../actions'
+
+export default function Page() {
+  return (
+    <form>
+      <input type="text" placeholder="input" />
+      <button formAction={serverComponentAction}>submit</button>
+    </form>
+  )
+}
diff --git a/test/production/app-dir/actions-tree-shaking/basic/basic-edge.test.ts b/test/production/app-dir/actions-tree-shaking/basic/basic-edge.test.ts
@@ -0,0 +1,3 @@
+process.env.TEST_EDGE = '1'
+
+require('./basic.test')
diff --git a/test/production/app-dir/actions-tree-shaking/basic/basic.test.ts b/test/production/app-dir/actions-tree-shaking/basic/basic.test.ts
@@ -0,0 +1,33 @@
+import { nextTestSetup } from 'e2e-utils'
+import {
+  getActionsRoutesStateByRuntime,
+  markLayoutAsEdge,
+} from '../_testing/utils'
+
+describe('actions-tree-shaking - basic', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  if (process.env.TEST_EDGE) {
+    markLayoutAsEdge(next)
+  }
+
+  it('should not have the unused action in the manifest', async () => {
+    const actionsRoutesState = await getActionsRoutesStateByRuntime(next)
+
+    expect(actionsRoutesState).toMatchObject({
+      // only one server layer action
+      'app/server/page': {
+        rsc: 1,
+      },
+      // only one browser layer action
+      'app/client/page': {
+        'action-browser': 1,
+      },
+      'app/inline/page': {
+        rsc: 1,
+      },
+    })
+  })
+})
diff --git a/test/production/app-dir/actions-tree-shaking/mixed-module-actions/app/layout.js b/test/production/app-dir/actions-tree-shaking/mixed-module-actions/app/layout.js
@@ -0,0 +1,7 @@
+export default function Layout({ children }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/...duction/app-dir/actions-tree-shaking/mixed-module-actions/app/mixed-module/cjs/actions.js b/...duction/app-dir/actions-tree-shaking/mixed-module-actions/app/mixed-module/cjs/actions.js
@@ -0,0 +1,13 @@
+'use server'
+
+export async function esmModuleTypeAction() {
+  return 'esm-module-type-action'
+}
+
+export async function cjsModuleTypeAction() {
+  return 'cjs-module-type-action'
+}
+
+export async function unusedModuleTypeAction1() {
+  return 'unused-module-type-action-1'
+}
diff --git a/...production/app-dir/actions-tree-shaking/mixed-module-actions/app/mixed-module/cjs/page.js b/...production/app-dir/actions-tree-shaking/mixed-module-actions/app/mixed-module/cjs/page.js
@@ -0,0 +1,13 @@
+const { cjsModuleTypeAction } = require('./actions')
+
+export default function Page() {
+  return (
+    <div>
+      <h3>One</h3>
+      <form>
+        <input type="text" placeholder="input" />
+        <button formAction={cjsModuleTypeAction}>submit</button>
+      </form>
+    </div>
+  )
+}
diff --git a/...duction/app-dir/actions-tree-shaking/mixed-module-actions/app/mixed-module/esm/actions.js b/...duction/app-dir/actions-tree-shaking/mixed-module-actions/app/mixed-module/esm/actions.js
@@ -0,0 +1,13 @@
+'use server'
+
+export async function esmModuleTypeAction() {
+  return 'esm-module-type-action'
+}
+
+export async function cjsModuleTypeAction() {
+  return 'cjs-module-type-action'
+}
+
+export async function unusedModuleTypeAction1() {
+  return 'unused-module-type-action-1'
+}
diff --git a/...production/app-dir/actions-tree-shaking/mixed-module-actions/app/mixed-module/esm/page.js b/...production/app-dir/actions-tree-shaking/mixed-module-actions/app/mixed-module/esm/page.js
@@ -0,0 +1,13 @@
+import { esmModuleTypeAction } from './actions'
+
+export default function Page() {
+  return (
+    <div>
+      <h3>One</h3>
+      <form>
+        <input type="text" placeholder="input" />
+        <button formAction={esmModuleTypeAction}>submit</button>
+      </form>
+    </div>
+  )
+}
diff --git a/...ction/app-dir/actions-tree-shaking/mixed-module-actions/mixed-module-actions-edge.test.ts b/...ction/app-dir/actions-tree-shaking/mixed-module-actions/mixed-module-actions-edge.test.ts
@@ -0,0 +1,3 @@
+process.env.TEST_EDGE = '1'
+
+require('./mixed-module-actions.test')
diff --git a/...production/app-dir/actions-tree-shaking/mixed-module-actions/mixed-module-actions.test.ts b/...production/app-dir/actions-tree-shaking/mixed-module-actions/mixed-module-actions.test.ts
@@ -0,0 +1,29 @@
+import { nextTestSetup } from 'e2e-utils'
+import {
+  getActionsRoutesStateByRuntime,
+  markLayoutAsEdge,
+} from '../_testing/utils'
+
+describe('actions-tree-shaking - mixed-module-actions', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  if (process.env.TEST_EDGE) {
+    markLayoutAsEdge(next)
+  }
+
+  it('should not do tree shake for cjs module when import server actions', async () => {
+    const actionsRoutesState = await getActionsRoutesStateByRuntime(next)
+
+    expect(actionsRoutesState).toMatchObject({
+      'app/mixed-module/esm/page': {
+        rsc: 1,
+      },
+      // CJS import is not able to tree shake, so it will include all actions
+      'app/mixed-module/cjs/page': {
+        rsc: 3,
+      },
+    })
+  })
+})
diff --git a/test/production/app-dir/actions-tree-shaking/reexport/app/layout.js b/test/production/app-dir/actions-tree-shaking/reexport/app/layout.js
@@ -0,0 +1,7 @@
+export default function Layout({ children }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/production/app-dir/actions-tree-shaking/reexport/app/named-reexport/client/actions.js b/test/production/app-dir/actions-tree-shaking/reexport/app/named-reexport/client/actions.js
@@ -0,0 +1,13 @@
+'use server'
+
+export async function sharedClientLayerAction() {
+  return 'shared-client-layer-action'
+}
+
+export async function unusedClientLayerAction1() {
+  return 'unused-client-layer-action-1'
+}
+
+export async function unusedClientLayerAction2() {
+  return 'unused-client-layer-action-2'
+}
diff --git a/test/production/app-dir/actions-tree-shaking/reexport/app/named-reexport/client/page.js b/test/production/app-dir/actions-tree-shaking/reexport/app/named-reexport/client/page.js
@@ -0,0 +1,21 @@
+'use client'
+
+import { useState } from 'react'
+import { sharedClientLayerAction } from './reexport-action'
+
+export default function Page() {
+  const [text, setText] = useState('initial')
+  return (
+    <div>
+      <button
+        id="action-1"
+        onClick={async () => {
+          setText(await sharedClientLayerAction())
+        }}
+      >
+        Action 1
+      </button>
+      <span>{text}</span>
+    </div>
+  )
+}
diff --git a/...uction/app-dir/actions-tree-shaking/reexport/app/named-reexport/client/reexport-action.js b/...uction/app-dir/actions-tree-shaking/reexport/app/named-reexport/client/reexport-action.js
@@ -0,0 +1,5 @@
+export {
+  sharedClientLayerAction,
+  unusedClientLayerAction1,
+  unusedClientLayerAction2,
+} from './actions'
diff --git a/test/production/app-dir/actions-tree-shaking/reexport/app/named-reexport/server/actions.js b/test/production/app-dir/actions-tree-shaking/reexport/app/named-reexport/server/actions.js
@@ -0,0 +1,13 @@
+'use server'
+
+export async function sharedServerLayerAction() {
+  return 'shared-server-layer-action'
+}
+
+export async function unusedServerLayerAction1() {
+  return 'unused-server-layer-action-1'
+}
+
+export async function unusedServerLayerAction2() {
+  return 'unused-server-layer-action-2'
+}
diff --git a/test/production/app-dir/actions-tree-shaking/reexport/app/named-reexport/server/page.js b/test/production/app-dir/actions-tree-shaking/reexport/app/named-reexport/server/page.js
@@ -0,0 +1,12 @@
+import { sharedServerLayerAction } from './reexport-action'
+
+export default function Page() {
+  return (
+    <div>
+      <form>
+        <input type="text" placeholder="input" />
+        <button formAction={sharedServerLayerAction}>submit</button>
+      </form>
+    </div>
+  )
+}
diff --git a/...uction/app-dir/actions-tree-shaking/reexport/app/named-reexport/server/reexport-action.js b/...uction/app-dir/actions-tree-shaking/reexport/app/named-reexport/server/reexport-action.js
@@ -0,0 +1,5 @@
+export {
+  sharedServerLayerAction,
+  unusedServerLayerAction1,
+  unusedServerLayerAction2,
+} from './actions'
diff --git a/...production/app-dir/actions-tree-shaking/reexport/app/namespace-reexport/client/actions.js b/...production/app-dir/actions-tree-shaking/reexport/app/namespace-reexport/client/actions.js
@@ -0,0 +1,13 @@
+'use server'
+
+export async function sharedClientLayerAction() {
+  return 'shared-client-layer-action'
+}
+
+export async function unusedClientLayerAction1() {
+  return 'unused-client-layer-action-1'
+}
+
+export async function unusedClientLayerAction2() {
+  return 'unused-client-layer-action-2'
+}