Article directory
1. Load modules on demand
Delay the introduction of modules that do not need to be used immediately until the time of use, avoiding the introduction of too many dependencies in the header file at one time, and the page loading is too bloated (such as ui component library, and some js plugins)
2. The window is first created and then hidden, and then displayed after initialization
It's a bit like blindfolding, it doesn't fundamentally optimize the speed
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 performance optimization
The electron client is developed based on h5 pages, with elegant, concise and high-performance codes to speed up startup
4. Optimize the main process (electron.js)
Use the node.js sub-process to optimize the burden of the main process. You can also create a new Worker for thread processing, but it cannot interact with the page dom. It is suitable for scenarios such as frequent user operations and cache comparison.