Electron パフォーマンス最適化

Electron アプリは強力な機能を備えていますが、その一方で起動が遅い、メモリ使用量が多い、パッケージサイズが大きいなどのパフォーマンス問題が発生する可能性があります。

適切に最適化することで、ユーザーエクスペリエンスとアプリの効率を大幅に向上させることができます。

起動パフォーマンス最適化

遅延読み込み

必須でないモジュールやコンポーネントを遅延読み込みし、起動時に一度に多くのコンテンツを読み込むことを避けます。
例：ユーザーが最初に操作したときにのみ特定の機能モジュールを読み込みます。

document.getElementById('loadFeature').addEventListener('click', async () => {
  const module = await import('./featureModule.js')
  module.initFeature()
})

コード分割

メインプロセスとレンダラープロセスのロジックを分割するか、ES モジュールの動的読み込みを使用します。
初回読み込み時のファイルサイズを削減するのに役立ちます。

起動時の操作を減らす

避ける：app.whenReady()中で複雑な計算やネットワークリクエストを実行すること
初期化操作を非同期化するか、バックグラウンドプロセスで処理します。

実行時パフォーマンス最適化

メモリ管理

レンダラープロセスが大量の DOM 要素や未解放のオブジェクトを読み込むことを避けます。
Chrome DevTools を使用してメモリリークを監視します。
メインプロセスのオブジェクトも適時参照を解放する必要があります。

// 清理定时器
const interval = setInterval(() => { /* ... */ }, 1000)
clearInterval(interval)

レンダリング最適化

仮想リストや遅延読み込みを使用してレンダリングの負荷を軽減します。
DOM の頻繁な操作を避け、可能な限り一括更新します。

メモリリークの防止

レンダラープロセスで多数のイベントをグローバルにバインドすることを避けます。
ウィンドウを閉じる際にイベントのバインドを解除し、参照を解放します。

window.onbeforeunload = () => {
  someElement.removeEventListener('click', handler)
}

パッケージサイズの最適化

依存関係の分析

ツールを使用してパッケージサイズを分析し、大きなモジュールや未使用の依存関係を見つけます。
ツールの例：webpack-bundle-analyzer

不要な依存関係を削除する

チェック：package.json中の未使用のモジュール
サードパーティのライブラリを最適化し、1つの関数のためだけにライブラリ全体を導入することを避けます。

asar を使用したパッケージング

Electron が提供する.asar形式でリソースをパッケージングし、読み込み速度を向上させ、ファイルの散乱を減らします。
コマンド例：
```
electron-packager . myApp --asar
```

マルチプロセス最適化

Web Workers の使用

CPU 負荷の高いタスクには Web Worker を使用し、レンダラープロセスのブロッキングを避けます。

const worker = new Worker('./worker.js')
worker.postMessage({ data: largeData })
worker.onmessage = (e) => console.log('Worker 处理结果', e.data)

バックグラウンドタスク処理

時間のかかる操作をメインプロセスまたはバックグラウンドプロセスに配置し、IPC 通信で結果を返します。
レンダラープロセスで複雑なロジックを直接実行することを避けます。

プロセスプール管理

頻繁に起動する子プロセスにはプロセスプールを再利用して、システムリソースの消費を削減できます。
画像処理、ビデオトランスコードなど CPU 消費が大きい操作に適しています。

まとめ

Electron パフォーマンス最適化の核となる考え方：

起動が速い：遅延読み込み、コード分割、起動操作の削減
動作がスムーズ：メモリ管理、レンダリング最適化、リーク防止
サイズが小さい：依存関係の分析、冗長性の除去、asar パッケージング
マルチタスクで高効率：Web Workers、バックグラウンド処理、プロセスプール管理

上記の最適化手段により、Electron アプリはデスクトップ上でより軽快かつ安定して効率的に動作できます。

その他の拡張