基于Umi搭建Electron App

一、開發(fā)環(huán)境準(zhǔn)備與框架搭建

在開發(fā)Electron應(yīng)用之前，我們需要先做好準(zhǔn)備工作。這包括安裝Node環(huán)境，使用npm工具進(jìn)行依賴管理，并推薦使用nvm來管理多個(gè)版本的Node。針對我們的項(xiàng)目需求，我們將使用Umi、Ant Design和Electron來搭建我們的應(yīng)用框架。在這個(gè)過程中，建議使用特定的Node和npm版本來確保開發(fā)流程的順暢。

二、集成UI庫與配置選擇

為了給我們的應(yīng)用添加豐富的用戶界面，我們將集成Ant Design作為我們的UI庫。為了節(jié)省集成的時(shí)間，我們推薦直接參考Ant Design Pro的搭建步驟而不是UmiJS的步驟。在生成React項(xiàng)目時(shí)，我們需要使用create-umi命令并選擇適當(dāng)?shù)呐渲眠x項(xiàng)。在這個(gè)過程中，我們需要避免覆蓋已有的文件并確保正確的配置。

三、Electron應(yīng)用的核心配置

在Electron應(yīng)用中，我們需要引入Electron依賴并編寫主進(jìn)程文件main.js。這個(gè)過程需要嚴(yán)格按照Electron官網(wǎng)的文檔操作，確保我們使用正確的命令加載URL，并且與Webpack的devServer配置保持一致。在配置Electron主進(jìn)程文件時(shí)，我們需要注意端口的使用，確保它與Webpack的配置相匹配。如果本地端口被占用，我們可以通過配置文件或環(huán)境變量來調(diào)整。

四、Electron App的打包與優(yōu)化

當(dāng)我們的應(yīng)用開發(fā)完成后，我們需要使用electron-builder工具來進(jìn)行打包。根據(jù)我們的操作系統(tǒng)，我們需要進(jìn)行相應(yīng)的配置，并設(shè)置一些關(guān)鍵參數(shù)，如appId、productName和輸出目錄等。在打包過程中，我們需要考慮一些參數(shù)的調(diào)整，如歷史路由模式、publicPath以及outputPath等，確保webpack的配置適用于Electron的打包需求。我們還需要根據(jù)生產(chǎn)環(huán)境和開發(fā)環(huán)境分別處理加載渲染進(jìn)程的方式，以避免打包后出現(xiàn)白屏等問題。

五、優(yōu)化打包體積與分享社區(qū)

在基于Umi搭建的Electron App中，我們可能會(huì)遇到打包后的dist包體積過大的問題。為了解決這個(gè)問題，我們可以采取一些優(yōu)化策略，如調(diào)整資源壓縮、使用更高效的打包工具或技術(shù)等。完成優(yōu)化后，我們可以將我們的框架分享到gitee上，供社區(qū)成員學(xué)習(xí)和使用。

基于Umi搭建Electron App——打包優(yōu)化

一、打包過程分析與體積問題診斷

在基于Umi搭建的Electron App過程中，我們可能會(huì)遇到打包后的應(yīng)用體積過大的問題，這可能會(huì)影響應(yīng)用的下載和更新體驗(yàn)。為了解決這個(gè)問題，我們需要深入分析打包過程并進(jìn)行優(yōu)化。我們發(fā)現(xiàn)主要問題在于過大體積的安裝程序和asar文件。通過對比使用webpack和electron-builder打包后的文件構(gòu)成，我們發(fā)現(xiàn)簡單工程的安裝程序體積較小，而在集成更多依賴（如umi、ant-design等）的復(fù)雜工程中，體積顯著增大。

二、優(yōu)化策略與實(shí)施

一、項(xiàng)目優(yōu)化與體積縮減

文件夾結(jié)構(gòu)重整

在搭建Electron應(yīng)用的過程中，我們進(jìn)行了文件夾結(jié)構(gòu)的優(yōu)化。具體操作包括新建app文件夾，將main.js移至app文件夾內(nèi)。在app文件夾中新建了package.json文件，以更好地管理項(xiàng)目配置。

避免重復(fù)打包與webpack配置調(diào)整

為了避免在打包過程中產(chǎn)生重復(fù)依賴，我們調(diào)整了webpack的打包配置。通過修改main.js的內(nèi)容以及相關(guān)的配置，確保了dependencies不會(huì)被重復(fù)打包。這不僅優(yōu)化了打包流程，也減小了應(yīng)用體積。

electron-builder打包流程調(diào)整

為了進(jìn)一步減小應(yīng)用體積，我們還調(diào)整了electron-builder的打包流程。優(yōu)化后，基本Electron-Umi應(yīng)用的.exe文件體積減少了13MB，asar文件體積減少了167.27MB，整體dist包大小減小了186MB。這不僅顯著提升了應(yīng)用的下載和更新體驗(yàn)，也為后續(xù)開發(fā)提供了更優(yōu)化的基礎(chǔ)。

二、Electron應(yīng)用的快速搭建

項(xiàng)目快速創(chuàng)建

通過執(zhí)行`pnpm create@quick-start/electron`命令，即可快速構(gòu)建一個(gè)基礎(chǔ)項(xiàng)目。啟動(dòng)后，你將看到一個(gè)預(yù)覽的electron應(yīng)用界面。這是搭建Electron應(yīng)用的第一步，快速而高效。

技術(shù)選型與項(xiàng)目結(jié)構(gòu)

我們選擇Electron作為開發(fā)桌面應(yīng)用的解決方案。默認(rèn)的項(xiàng)目結(jié)構(gòu)有助于理解，其結(jié)構(gòu)對應(yīng)于官方提供的圖示。我們可以從`renderer`目錄開始改造，這里主要包含Vue3代碼。通過清理`App.vue`并實(shí)現(xiàn)相關(guān)改動(dòng)，你的代碼改動(dòng)將實(shí)時(shí)反映在主窗口上。

配置調(diào)整

除了界面修改，我們還可以進(jìn)一步調(diào)整應(yīng)用窗口的配置，如標(biāo)題等。這些配置可以在`renderer/index.html`中進(jìn)行更改。通過合理的配置調(diào)整，可以進(jìn)一步提升應(yīng)用的用戶體驗(yàn)和性能。

通過以上的改動(dòng)和優(yōu)化，我們可以更高效地搭建和定制Electron應(yīng)用，為開發(fā)者提供更為優(yōu)化的開發(fā)體驗(yàn)，同時(shí)也為用戶帶來更好的應(yīng)用體驗(yàn)。優(yōu)化后的代碼和具體配置可以參考相關(guān)文檔和倉庫地址，以實(shí)現(xiàn)更高效和優(yōu)化的Electron App構(gòu)建流程。