fix(electron): optimize bundle size by removing unused dependencies (#…

…6415)

Should greatly reduce the size of helper.js and could speed up the time on starting the client app.

fix #6312

Before:

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/681d6766-7d48-4574-b791-49e2c0ae6e1b.png)

After:
![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/ab13e624-7e03-407d-9538-3b9452694402.png)

packages/frontend/electron/scripts/build-layers.ts

@@ -1,6 +1,9 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+
 import * as esbuild from 'esbuild';
 
-import { config, mode } from './common';
+import { config, mode, rootDir } from './common';
 
 async function buildLayers() {
   const common = config();
@@ -16,10 +19,20 @@ async function buildLayers() {
       `"${process.env.BUILD_TYPE_OVERRIDE}"`;
   }
 
-  await esbuild.build({
+  const metafile = process.env.METAFILE;
+
+  const result = await esbuild.build({
     ...common,
     define: define,
+    metafile: !!metafile,
   });
+
+  if (metafile) {
+    await fs.writeFile(
+      path.resolve(rootDir, `metafile-${Date.now()}.json`),
+      JSON.stringify(result.metafile, null, 2)
+    );
+  }
 }
 
 await buildLayers();

packages/frontend/electron/scripts/common.ts

@@ -4,7 +4,7 @@ import { fileURLToPath } from 'node:url';
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { getRuntimeConfig } from '@affine/cli/src/webpack/runtime-config';
 import { sentryEsbuildPlugin } from '@sentry/esbuild-plugin';
-import type { BuildOptions } from 'esbuild';
+import type { BuildOptions, Plugin } from 'esbuild';
 
 export const electronDir = fileURLToPath(new URL('..', import.meta.url));
 
@@ -33,7 +33,7 @@ export const config = (): BuildOptions => {
     define['process.env.GITHUB_SHA'] = `"${process.env.GITHUB_SHA}"`;
   }
 
-  const plugins = [];
+  const plugins: Plugin[] = [];
 
   if (
     process.env.SENTRY_AUTH_TOKEN &&
@@ -49,6 +49,28 @@ export const config = (): BuildOptions => {
     );
   }
 
+  plugins.push({
+    name: 'no-side-effects',
+    setup(build) {
+      build.onResolve({ filter: /\.js/ }, async args => {
+        if (args.pluginData) return; // Ignore this if we called ourselves
+
+        const { path, ...rest } = args;
+
+        // mark all blocksuite packages as side-effect free
+        // because they will include a lot of files that are not used in node_modules
+        if (rest.resolveDir.includes('blocksuite')) {
+          rest.pluginData = true; // Avoid infinite recursion
+          const result = await build.resolve(path, rest);
+
+          result.sideEffects = false;
+          return result;
+        }
+        return null;
+      });
+    },
+  });
+
   return {
     entryPoints: [
       resolve(electronDir, './src/main/index.ts'),