前言

Electron凭借“Web技术开发跨网站桌面应用”的特性，让无数前端开发者轻松拥有了桌面开发能力。但 Chromium 内核 + Node.js 的双进程架构，也带来了启动慢、内存高这两个挥之不去的痛点。

VS Code 启动要 3 秒、Slack 内存飙到 1 GB、Electron 应用被使用者戏称 “内存杀手”——这些场景你是否似曾相识？

整理了7 个技巧每个技巧都遵循「问题 → 原理 → 代码 → 效果」的完整链路，直接复制就可以使用。

技巧一这方面。延迟显示窗口 —— 根治白屏问题

问题描述

Electron 应用启动时使用者经常看到窗口先显示空白内容，接下来才加载页面这体验非常糟糕。根源在于窗口创建和页面加载是串行执行的。

原理分析

Electron 窗口默认创建后就会显示，此时页面可能还没加载完。通过 show: false 隐藏窗口，用 ready-to-show 事件监听页面就绪后再显示。配合 backgroundColor 属性避免白屏。其实，

代码示例

// main/index.ts
import { app。BrowserWindow } from 'electron';import { join } from 'path';function createWindow: BrowserWindow {
const win = new BrowserWindow({
至于width，1200,height: 800,show: false。// 关键1：初始隐藏窗口
backgroundColor: '#ffffff',// 关键2：设置背景色防白屏
webPreferences: {
preload: join,contextIsolation: true,nodeIntegration: false,},});// 关键3：页面加载完成后再显示
win.once => {
win.show;
})，win.loadFile);
return win，}
app.whenReady.n => {
createWindow;})，

调整效果

调整前	调整后
窗口先显示空白 → 加载内容闪烁	窗口直接显示完整页面使用者感知启动时间从 -5 秒提高至 ~0 秒

再看技巧二。主进程禁用同步操作 —— 告别界面卡死

主进程是 Electron 的“大脑”，负责窗口管理、IPC 通信、程序交互。同步 I/O 操作（如 fs.readFileSync) 会阻塞事件循环，导致整个应用无响应。

全部使用异步 API。

// ❌ 错误示例：同步阻塞
import * as fs from 'fs';function loadConfig {
const data = fs.readFileSync;// 阻塞，return JSON.parse;}
app.whenReady.n => {
const config = loadConfig;// 危险：延迟窗口创建
createWindow;})，

// ✅ 正确示例：异步非阻塞
import * as fs from 'fs/promises';import { app } from 'electron';async function loadConfig {
try {
const data = await fs.readFile;return JSON.parse;} catch {
console.warn;return { me: 'light',lang: 'zh-CN' };}
}
app.whenReady.n => {
const config = await loadConfig;// 异步加载不阻塞窗口创建
createWindow;})，

：避免同步 IPC

// ❌ 错误：同步 IPC 会阻塞渲染进程
const result = ipcRenderer.sendSync;// ✅ 正确：异步 IPC
const result = await ipcRenderer.invoke;

• 同步 fs 操作：大型 JSON 文件解析可能阻塞 3‑5 秒。
• 异步 fs 操作：非阻塞，窗口可正常响应。按理说，
• 同步 IPC：PUI 完全无响应期间长达数秒。
• 异步 IPC：PUI 保持流畅，使用者可正常操作。怎么说呢，

从技巧三来看，代码拆分与懒加载 —— 按需加载减少首屏体积

If you import every module statically initial bundle contains all code。causing a slow start. Non‑core modules should be loaded on demand.

代码分割**，将代码拆分为多个 chunk，运行时动态加载。静态导入在打包时被直接合并到主 bundle；动态导入（) 会生成独立 chunk，在需要时才请求。 不过，

// main/index.ts - 主进程延迟加载非主要模块
function initNonEssentialModules {
setImmediate => {
const { initAutoUpdater } = await import;说起来，const { initLogger } = await import;initAutoUpdater;initLogger，});}
app.whenReady.n => {
createWindow;// 优先创建主窗口
initNonEssentialModules;// 延迟加载其他模块
});

// renderer/views/Dashboard.vue - 路由级懒加载
import { defineComponent } from 'vue';import { useRouter } from 'vue-router';export default defineComponent({
说到name。'Dashboard',setup {
const router = useRouter;说起来，const openAnalytics = async => {
const { AnalyticsPanel } = await import(
/* webpackChunkName: "analytics" */
'@/views/AnalyticsPanel.vue'
);router.push，};return { openAnalytics };},})，

// vite.config.ts - 手动分块配置示例
import { defineConfig } from 'vite';import vue from '@vitejs/plugin-vue';export default defineConfig({
plugins:,build: {
rollupOptions: {
说到output。{
manualChunks: {
'vue-vendor':,'editor':,'charts':,},},},},});

" Let's rewrite final version properly. Will produce final corrected version now.

Electron 凭借“Web 技术开发跨网站桌面应用”的特性，让无数前端开发者轻松拥有了桌面开发能力。但 Chromium 内核 + Node.js 的双进程架构，也带来了 启动慢、内存高 这两个挥之不去的痛点。

• VS Code 启动要约 3 秒；
• Slack 内存飙到 1 GB；老实说，
• Electron 应用被使用者戏称为“内存杀手”。这些场景你是否熟悉，

整理了 7 个技巧 每个技巧均遵循「问题 → 原理 → 示例代码 → 效果」链路，可直接复制使用。

Electron 应用启动时经常出现“先显空白窗体→再渲染内容”的现象，使用者感知为卡顿或闪烁。根本原因是 **窗口创建** 与 **页面渲染** 串行进行。

默认情况下 BrowserWindow 在实例化后立即展示，此时页面可能仍在下载或解析。通过把 show:false 设为隐藏，并监听 ready-to-show 事件。在渲染完成后再调用 win.show 即可消除白屏。使用 backgroundColor 提供占位颜色，可让使用者看到统一背景而非纯白。

// main/index.ts
import { app,BrowserWindow } from "electron";import { join } from "path";不过，function createWindow: BrowserWindow {
const win = new BrowserWindow({
再看width，1200,height:800,show:false。// ★ 初始隐藏
backgroundColor:"#ffffff",// ★ 防止白屏
webPreferences:{
preload:join,contextIsolation:true,nodeIntegration:false,}
});// ★ 页面准备好后再展示
win.once=>{
win.show;})，win.loadFile);话说回来，return win;}
app.whenReady.n=>createWindow);

调整效果 

场景/模块类型	体积 & 内存使用
	Lodash 全部导入	150	300
Lodash 按需导入	30	80
MVC 路由全部预加载	200+500+
MVC 路由懒加载 + prefetch 高频路由 70+150+

指标	调整前	调整后
感知启动时间	约 5 秒	≈0 秒

---

技巧二这方面，主进程禁用同步操作 —— 告别界面卡死 & 同步 IPC 阻塞

问题描述 & 痛点& 导致 UI 冻结数秒甚至十几秒！

主进程负责窗口管理、IPC 通信还有程序交互。若在此线程中使用诸如 fs.readFileSync 或者 ipcRenderer.sendSync 等 **同步** 接口。将会阻塞 Node.js 的事件循环，使得整个应用在此期间无响应。话说回来，

原理分析 & 为什么要全改为异步& CPU 被占满！

• Node 同步 API 在调用期间会锁住线程直至完成；
• 当它们出现在 app.whenReady 前或渲染过程中的任意位置，都将拖慢 window.create 或导致 UI 卡顿。
• 方法是 全部改为对应的 Promise/回调 异步 API 并配合 async/await 使用，以保持事件循环畅通。

TIPS : 把同

Synchronous Ipc example...



---