构建生产版本 ​

当需要打包你的 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'
})

自定义构建 ​

构建过程可以通过多种 构建配置选项 来自定义构建。具体来说，你可以通过 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()]
})

外部依赖 ​

配置选项 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()]