perf: define 'typeof window' in webpack to eliminate deadcode

shuvijs · Jul 17, 2024 · 901dd10 · 901dd10
1 parent ee27ff1
commit 901dd10
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 3 deletions.
diff --git a/examples/basic/src/routes/home/layout.tsx b/examples/basic/src/routes/home/layout.tsx
@@ -2,6 +2,12 @@ import React from 'react';
 import { RouterView } from '@shuvi/runtime';
 
 export default function Layout() {
+  React.useEffect(() => {
+    if (typeof window !== 'undefined') {
+      console.log(`[useEffect] layout useEffect`);
+    }
+  }, []);
+
   return (
     <div
       style={{

diff --git a/examples/package-esmodule/src/index.ts b/examples/package-esmodule/src/index.ts
@@ -2,4 +2,8 @@ import { consoleLog } from './utils.js';
 
 export default (data?: string) => {
   consoleLog(`Hello from package-esmodule ${data}`);
+
+  if (typeof window !== 'undefined') {
+    consoleLog('[package-esmodule] Running in the browser');
+  }
 };
diff --git a/packages/toolpack/src/webpack/config/browser.ts b/packages/toolpack/src/webpack/config/browser.ts
@@ -220,6 +220,10 @@ export function createBrowserWebpackChain(options: BaseOptions): WebpackChain {
     {
       ...options,
       __BROWSER__: true,
+      /**
+       * swc.optimizer can't handle `typeof window` correctly for dependencies
+       */
+      'typeof window': JSON.stringify('object'),
       // prevent errof of destructing process.env
       'process.env': JSON.stringify('{}')
     }

diff --git a/packages/toolpack/src/webpack/config/node.ts b/packages/toolpack/src/webpack/config/node.ts
@@ -48,7 +48,11 @@ export function createNodeWebpackChain(options: BaseOptions): WebpackChain {
   chain.plugin('define').tap(([options]) => [
     {
       ...options,
-      __BROWSER__: false
+      __BROWSER__: false,
+      /**
+       * swc.optimizer can't handle `typeof window` correctly for dependencies
+       */
+      'typeof window': JSON.stringify('undefined')
     }
   ]);
 

diff --git a/test/e2e/shuvi-cli.test.ts b/test/e2e/shuvi-cli.test.ts
@@ -117,7 +117,11 @@ describe('shuvi/inspect', () => {
     const project = createTestCtx('shuvi-cli');
     const { message } = await project.run('inspect', ['--verbose']);
     expect(message).toMatch(
-      `definitions: { 'process.env.NODE_ENV': '"development"'`
+      `definitions: {
+        'process.env.NODE_ENV': '\"development\"',
+        __BROWSER__: false,
+        'typeof window': '\"undefined\"'
+      }`
     );
 
     const project2 = createTestCtx('shuvi-cli');
@@ -126,7 +130,11 @@ describe('shuvi/inspect', () => {
       '--verbose'
     ]);
     expect(message2).toMatch(
-      `definitions: { 'process.env.NODE_ENV': '"production"'`
+      `definitions: {
+        'process.env.NODE_ENV': '\"production\"',
+        __BROWSER__: false,
+        'typeof window': '\"undefined\"'
+      }`
     );
   });
 });