18.3 代码分割与按需加载

Electron 应用启动后，用户首先看到的是窗口和界面。如果所有代码都在应用启动时一次性加载，那必然会导致首屏渲染变慢、内存占用升高，尤其在功能复杂的大型项目中，这个问题会更加明显。代码分割与按需加载正是解决这一痛点的标准手段——只在真正需要的时候才加载对应的代码，从而减少启动时的资源消耗。

18.3.1 为什么 Electron 更需要代码分割

很多前端开发者习惯在 Web 应用中使用路由懒加载，但 Electron 环境有其特殊性，代码分割的意义更大：

• 启动体感：用户双击图标后，主进程要初始化窗口、加载 HTML、执行渲染进程的 JavaScript。如果 bundle 过大，窗口可能白屏较长时间，体验很差。
• 内存常驻：Electron 窗口关闭后，主进程仍可能常驻在系统托盘。不合理的全局模块加载会让内存一直得不到释放。
• 多窗口场景：如果你的应用同时打开了多个窗口（例如设置窗口、预览窗口），每个窗口都会创建独立的渲染进程，如果不做分割，每个进程都会加载完整的代码包，造成内存浪费。

因此，合理的代码分割应该覆盖渲染进程（按路由或功能拆分）和主进程（按需加载某些工具模块），并尽量让多个窗口之间共享公共的底层库。

18.3.2 渲染进程的按需加载

渲染进程本质上就是一个 Web 环境，所以 Web 端成熟的代码分割方案都可以直接移植过来。核心是 import() 动态导入和构建工具的自动拆分能力。

1. 与路由框架结合实现页面级懒加载

如果你在渲染进程中使用 Vue Router 或 React Router，懒加载是最常见的分割方式：

// Vue Router 示例
const routes = [
  {
    path: '/editor',
    component: () => import('./views/Editor.vue') // 按需加载
  },
  {
    path: '/settings',
    component: () => import('./views/Settings.vue')
  }
];

// React Router 示例
const Editor = React.lazy(() => import('./views/Editor'));
const Settings = React.lazy(() => import('./views/Settings'));

function App() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <Routes>
        <Route path="/editor" element={<Editor />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  );
}

这样，只有当用户导航到某个路由时，对应的代码块才会被下载和执行。首屏只需要加载当前展示页面的代码，启动速度明显提升。

2. 组件级别的懒加载

不是只有页面才能分割，一些体积庞大且非首屏必需的组件也可以按需加载。例如一个复杂的图表组件或富文本编辑器：

// 在 Vue 中
const Chart = () => import('./components/HeavyChart.vue');

// 在 React 中
const RichEditor = React.lazy(() => import('./components/RichEditor'));

这一招在 Electron 中特别有用——很多桌面应用会内置图表分析、视频播放、代码编辑器等重量级功能，而这些功能并不是每次打开应用都要用到。通过组件级拆分，可以有效降低渲染进程的初始内存占用。

3. 利用构建工具自动分割公共依赖

即使你做了路由懒加载，多个页面可能都依赖了同一个大型库（如 moment、lodash、three.js）。如果不加处理，这个库会被打包到多个 chunk 里，导致重复加载和缓存失效。现代打包工具如 Webpack 和 Vite 都能自动抽离公共模块。

Webpack 配置示例（在 splitChunks 中定义缓存组）：

// webpack.config.js
optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all',
      }
    }
  }
}

Vite (Rollup) 底层默认就会将 node_modules 中的依赖拆成单独的 chunk，通常不需要额外配置。但如果你需要手动控制，可以在 vite.config.js 中通过 build.rollupOptions.output.manualChunks 来指定。

这样处理后，多个窗口或路由页面会共用同一个 vendors.js 文件，既减少了重复下载，又提高了缓存命中率。

4. 预加载策略的配合

按需加载虽然减少了首屏负担，但也意味着用户点击某个功能时可能会出现短暂的加载延迟。Electron 可以利用主进程或窗口空闲时间提前加载一些很可能被使用的模块。例如：

• 在主窗口创建后，立即在后台预加载一个高概率使用的设置页面 chunk。
• 利用 webContents 的 prefetch 或者直接发起一个不可见的 <link rel="prefetch">。

示例（在主进程发送消息让渲染进程预加载）：

// 主进程
mainWindow.webContents.on('did-finish-load', () => {
  mainWindow.webContents.executeJavaScript(`
    import('./views/Settings.vue')
  `);
});

这样用户在真正打开设置窗口时，模块可能已经在内存中了，体验会更加流畅。

18.3.3 主进程的按需加载

主进程通常代码量远小于渲染进程，但在大型项目中主进程也可能膨胀，比如集成了大量 IPC 处理器、系统服务、文件监控等。如果所有模块都在应用启动时 require，主进程的初始化时间会变长，进而延迟窗口的创建。

1. 延迟加载非关键模块

将那些只在特定功能触发时才需要的模块改为动态导入：

// 错误：启动时就加载
const { initAutoUpdater } = require('./services/autoUpdater');

// 正确：用到时才加载
ipcMain.handle('check-update', async () => {
  const { initAutoUpdater } = await import('./services/autoUpdater');
  return initAutoUpdater();
});

这样，自动更新相关的几百行代码只有在用户手动点击“检查更新”时才会被加载进内存，启动速度不受影响。

2. 惰性初始化服务

许多后台服务（如文件监视器、数据库连接等）不需要应用一启动就立即可用。你可以将它的初始化推迟到第一次被调用时：

let db = null;
async function getDB() {
  if (!db) {
    const Database = (await import('./database')).default;
    db = new Database();
    await db.connect();
  }
  return db;
}

ipcMain.handle('db:query', async (event, sql) => {
  const db = await getDB();
  return db.query(sql);
});

这种模式被称为“懒初始化”，它结合代码分割，能将副作用的代价后移到真正需要的时刻。

18.3.4 调试与验证

做完上述优化后，你应该实际测量效果，而不是凭感觉。可以通过以下几个指标来判断：

• 首屏可交互时间：从 app.whenReady() 到窗口首帧内容渲染完成的时间。
• 主进程启动耗时：在 app.on('ready') 前后打点，看看动态导入减少了多少同步启动开销。
• Chunk 体积与数量：使用打包工具的 bundle analyzer（如 webpack-bundle-analyzer 或 rollup-plugin-visualizer）查看各 chunk 的大小，避免产生过多极小的碎片文件（可能导致 HTTP 请求数过多，但在 Electron 中本地文件读取影响不大，更多是代码维护复杂度）。

Electron 内置了 DevTools，你可以在渲染进程的 Network 面板中观察资源加载顺序，确保按需加载的模块确实在需要时才被请求。

18.3.5 注意事项

• 不要过度拆分：每个动态 import 都会产生额外的异步请求（本地文件虽然快，但大量碎片化 chunk 仍然会拖慢整体解析执行时间）。通常，路由级别的分割加上公共依赖抽取就足够，组件级拆分只在体积非常突出的情况下进行。
• 与 asar 的关系：Electron 的 asar 打包是将所有资源封包成一个文件，代码分割后的多个 chunk 仍然会一起被打包进 asar 中。本地文件读取性能很好，不必担心多文件带来的性能问题。但要确保动态导入的路径在 asar 中能正确解析。
• 跨窗口共享代码：如果有多个渲染进程（多个窗口或 webview），可以利用 webPreferences.preload 注入公共逻辑，或者让多个窗口加载同一个 URL（本地文件），并通过构建工具使它们共享同一个 vendors.js 缓存。这是利用浏览器缓存机制减少窗口内存占用的一个实用技巧。
• 主进程动态导入的路径问题：主进程中 import() 是 Node.js 的标准 ES 模块支持（Electron 的 Node 版本一般支持），但需要注意模块路径必须是绝对路径或相对于 __dirname，避免打包后丢失。如果使用 TypeScript，确保编译后的输出能正确解析。

代码分割与按需加载是优化 Electron 应用性能的必备手段。它不需要修改任何业务逻辑，只需要调整模块的引入方式和打包配置，就能明显提升启动速度、降低内存基线，并让应用的整体响应更加轻盈。在下一节，我们会进一步探讨内存泄漏的排查与修复，让应用的稳定性更上一层楼。