Electronアプリのファイルサイズ最適化,必要なファイルだけパッケージするやり方

ElectronアプリはchromiumをベースにしていてHello worldするだけでも100M近くのファイルサイズになってしまう. 油断しているとすぐに200Mとかになってしまうので,ファイルサイズをできるだけ小さくすることを普段から心がける必要がある.

心がけた結果のPRがこれ

github.com

今までは,

$ NODE_ENV=production ./node_modules/.bin/electron-packager . nicomentron --platform=darwin --arch=x64 --out=packages --overwrite

こうビルドしていた. こうすると,もちろんだがカレントディレクトリのファイル全てがアプリ内に含まれてしまい,node_modulesや当たり前に不必要なファイルが数多く含まれてしまいこのようになる.

f:id:tsuwatch:20170527181027p:plain 最適化できているかは,アプリ内のここのディレクトリを見れば確認することができる.(asarで圧縮してしまうともちろん見れない

せっかくビルドした結果をapp以下に吐いているのに無関係に全ファイルアプリ内に入ってしまっていることがわかる. 必要なのはビルド結果のapp以下のファイルとpackage.json,その他必要なファイルだけだ.

不必要なファイルで気をつけるべきなのは,自分のアプリで言うとフラッシュプラグインがあり,今後マルチプラットフォーム対応するにあたって各プラットフォームごとのフラッシュプラグインを用意するので,このままだと全てのフラッシュプラグインが入ってしまう

結果以下のようにapp以下をパッケージングするように変更した.パッケージングするにはpackage.jsonが必要である.自分のアプリはexternalsでネイティブモジュールを使用しているので,仕方なくnpm installして,electron-rebuildも実行するようにしている.もちろん,本来であればnode_modulesも必要ない

$ cp package.json ./app && cp -r plugins ./app && cd ./app && rm -rf node_modules && npm install --production && ../node_modules/.bin/electron-rebuild -m . sqlite3 keytar
$ NODE_ENV=production ./node_modules/.bin/electron-packager ./app nicomentron --platform=darwin --arch=x64 --out=packages --overwrite --asar

結果 f:id:tsuwatch:20170527223245p:plain 良さそう