1. 按需加载模块
把不需要马上用到的模块推迟到要用时候引入,避免头部文件一次性引入过多依赖,页面加载过于臃肿(比如ui组件库,和一些js插件)
2. 窗口先创建后隐藏,初始化后再展示
有点类似于障眼法,没有从根本上去优化速度
const options = {
width: 500,
height: 890,
center: true,
title: '桌面开发App',
icon: path.join(__dirname, 'icon.png'),
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true,
// enableRemoteModule:true,
contextIsolation: false,
nodeIntegrationInWorker: true,
enableRemoteModule: true,
webSecurity: false,
// 允许使用webview
// webviewTag: true
},
//优化速度重点在这里
show: false, // newBrowserWindow创建后先隐藏
}
// Create the browser window.
const mainWindow = new BrowserWindow(
options
);
globalShortcut.register('Control+Shift+i', function () {
mainWindow.webContents.openDevTools()
})
mainWindow.on('focus', () => {
globalShortcut.register('CommandOrControl+F', function () {
if (mainWindow && mainWindow.webContents) {
mainWindow.webContents.send('on-find', '')
}
})
})
mainWindow.on('blur', () => {
globalShortcut.unregister('CommandOrControl+F')
})
//优化速度重点在这里
mainWindow.on('ready-to-show', () => {
mainWindow.show() // 初始化后再显示
})
3. web性能优化
electron客户端是基于h5页面开发,优雅简洁高性能代码加快启动速度
4. 优化主进程(electron.js)
使用node.js子进程,优化主进程负担,也可以new 一个Worker做线程上的处理,不过不可以和页面dom做交互,适用于用户频繁操作与缓存对比等场景