代码之家 › 专栏 › 技术社区 › Gab

如何优化Electron JS应用程序的大小?

electron-react electron-builder electron optimization reactjs

Gab · 技术社区 · 2 年前

我制作了一个简单的桌面应用程序,使用React(与Vite一起)和ElectronJS。我只检查了React应用程序(CSS、js和html)的最终文件的捆绑包大小,不出所料,它非常非常低。

然后我使用Electron构建器进行打包,选择为可移植到Windows,但与React捆绑包的大小相比,最终应用程序的大小非常大,为168MB,我不知道该怎么做才能减少它。我一直在搜索Electron和Electron构建器文档,但没有得到答案,有人能帮我吗?

我试着优化React应用程序的性能,但没有什么能改变Electron构建器生成的最终可执行文件的大小

package.json配置:

{
  "name": "venedolar-app",
  "private": true,
  "version": "1.0.0",
  "description": "Monitor application that displays the currencies of Venezuela up to date",
  "type": "module",
  "main": "dist/electron.cjs",
  "scripts": {
    "dev": "vite",
    "start": "electron .",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
  "author": "Gabriel Trujillo",
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.4.2",
    "@fortawesome/free-solid-svg-icons": "^6.4.2",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sass": "^1.69.5"
  },
  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react-swc": "^3.3.2",
    "electron": "^27.0.3",
    "electron-builder": "^24.6.4",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  },
  "build": {
    "appId": "com.venedolar.app",
    "productName": "Venedolar",
    "copyright": "Copyright @ 2023 Gabriel Trujillo, Diego PeÃ±a",
    "win": {
      "icon": "dist/icon2.ico",
      "target": [
        "portable"
      ],
      "artifactName": "Venedolar1.0_portable.exe"
    },
    "directories": {
      "output": "build",
      "buildResources": "dist"
    },
    "files": [
      "dist/**/*"
    ]
  }
}

1 回复 | 直到 2 年前

Arkellys 2 年前

打包的应用程序总是比你的源代码大,因为它包括Electron二进制文件,大小约为150亿字节(适用于Windows)。您只能优化资源文件夹的大小,资源文件夹是您打包的代码的一部分。

根据您的配置,您不仅可以打包捆绑文件:

"files": [
  "dist/**/*",
  "public/electron.cjs",
  "node_modules/**/*",
  "package.json"
]

捆绑文件后,您不再需要 node_modules 文件夹,这将增加您的应用程序的大小。理想的情况是:

"files": [
  "dist/**/*",
]

在你的情况下,这意味着你应该告诉Vite也捆绑 electron.cjs 。我对这个bundler不够熟悉,所以我不能给你一个配置。