构建生产版本

当需要打包你的 Electron 应用程序以进行分发时，通常需要先运行 electron-vite build 命令。

输出目录

默认情况下，构建输出将放置在 out（相对于项目根目录）。

├──out/
│  ├──main
│  ├──preload
│  └──renderer
└──...

├──out/
│  ├──main
│  ├──preload
│  └──renderer
└──...

你也可以通过命令行来重新指定它，例如 electron-vite dev/build/preview --outDir=dist。

此外，还可以使用 build.outDir 选项来分别指定主进程、渲染器和预加载脚本的输出目录。

// electron.vite.config.js
export default defineConfig({
  main: {
    build: {
      outDir: 'dist/main'
    }
  },
  preload: {
    build: {
      outDir: 'dist/preload'
    }
  },
  renderer: {
    build: {
      outDir: 'dist/renderer'
    }
  }
})

// electron.vite.config.js
export default defineConfig({
  main: {
    build: {
      outDir: 'dist/main'
    }
  },
  preload: {
    build: {
      outDir: 'dist/preload'
    }
  },
  renderer: {
    build: {
      outDir: 'dist/renderer'
    }
  }
})

提示

应该指出的是，最好的做法是将打包的代码放在一个目录中，因为它们都是 Electron 应用程序运行所需要的，这与源代码不同。这使得在打包 Electron 应用程序时可以轻松排除源代码以减小包的体积。

自定义构建

构建过程可以通过多种 构建配置选项 来自定义构建。具体来说，你可以通过 build.rollupOptions 直接调整底层的 Rollup 选项：

// electron.vite.config.js
export default defineConfig({
  main: {
    rollupOptions: {
      // ...
    }
  },
  preload: {
    rollupOptions: {
      // ...
    }
  },
  renderer: {
    rollupOptions: {
      // ...
    }
  }
})

// electron.vite.config.js
export default defineConfig({
  main: {
    rollupOptions: {
      // ...
    }
  },
  preload: {
    rollupOptions: {
      // ...
    }
  },
  renderer: {
    rollupOptions: {
      // ...
    }
  }
})

分块策略

一个好的分块策略对 Electron 应用程序的性能非常重要。

你可以通过配置 build.rollupOptions.output.manualChunks 来自定义 chunk 的分割策略（请参阅 Rollup 文档）。另外，你也可以添加 Vite 提供的 splitVendorChunkPlugin 来使用 “分割 Vendor Chunk” 策略。

// electron.vite.config.ts
import { defineConfig, splitVendorChunkPlugin } from 'electron-vite'

export default defineConfig({
  main: {
    build: {
      rollupOptions: {
        output: {
          manualChunks(id): string | void {
            if (id.includes('foo')) {
              return 'foo'
            }
          }
        }
      }
    }
  },
  // ...
  renderer: {
    plugins: [splitVendorChunkPlugin()]
  }
})

// electron.vite.config.ts
import { defineConfig, splitVendorChunkPlugin } from 'electron-vite'

export default defineConfig({
  main: {
    build: {
      rollupOptions: {
        output: {
          manualChunks(id): string | void {
            if (id.includes('foo')) {
              return 'foo'
            }
          }
        }
      }
    }
  },
  // ...
  renderer: {
    plugins: [splitVendorChunkPlugin()]
  }
})

提示

splitVendorChunkPlugin 从 Vite 导出.

外部依赖

配置选项 build.rollupOptions.external (请参阅 Rollup 文档) 提供了一种从输出包中排除依赖项的方法。此选项通常对 Electron 开发人员是非常有用。

例如，在 Electron 中使用 sqlite3 node 插件：

// electron.vite.config.js
export default defineConfig({
  main: {
    build: {
      rollupOptions: {
        external: ['sqlite3']
      }
    },
  }
  // ...
})

// electron.vite.config.js
export default defineConfig({
  main: {
    build: {
      rollupOptions: {
        external: ['sqlite3']
      }
    },
  }
  // ...
})

在上面的配置中，它指示模块 sqlite3 应该从打包代码中排除。如果你不这么做，你会得到一个错误。

默认情况下，electron-vite 会将添加 electron 模块和所有 node 内置模块作为外部依赖项。如果开发人员添加了自己的外部依赖项，它们将自动合并。更多详情可参考 内置配置。

此外，electron-vite 提供了一个 externalizeDepsPlugin 插件来自动外部化 package.json 的依赖项（dependencies）。我们不必在 external 选项中一一添加。

import { defineConfig, externalizeDepsPlugin } from 'electron-vite'

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin()],
  },
  preload: {
    plugins: [externalizeDepsPlugin()]
  },
  // ...
})

import { defineConfig, externalizeDepsPlugin } from 'electron-vite'

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin()],
  },
  preload: {
    plugins: [externalizeDepsPlugin()]
  },
  // ...
})

了解更多有关信息，请参阅 dependencies vs devDependencies 。

推荐

对于主进程和预加载脚本，最好的做法是外部化依赖关系。对于渲染器，它通常是完全打包的，因此最好将依赖项安装在 devDependencies 中。这使得最终的分发包更小。

源代码保护

请参阅 源代码保护。