如何优化 Electron JS 应用程序的大小？-解网

问：

我使用 React（使用 Vite）和 Electron JS 制作了一个简单的桌面应用程序。我只检查了 React 应用程序（CSS、js 和 html）的最终文件的包大小，正如预期的那样，它非常非常低。

然后我使用 Electron builder 进行打包，选择将其移植到 Windows 上，但与 React 捆绑包大小相比，生成的应用程序的大小大得非常大，它是 168MB，我不知道该怎么做才能让它更小。我一直在搜索 Electron 和 Electron builder 文档，但我没有得到答案，谁能帮我？

我尝试优化 React 应用程序的性能，我做到了，但没有任何改变 Electron builder 制作的最终可执行文件的大小

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/**/*"
    ]
  }
}

reactjs 优化生成器电子反应

"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/**/*",       "public/electron.cjs",       "node_modules/**/*",       "package.json"     ]   }

在这里

0赞 Arkellys 11/17/2023

我会为你做，但当你添加其他信息时，你应该编辑你的问题，而不是把它写成评论。谢谢

0赞 Gab 11/17/2023

哦，谢谢，对不起，我是新来的

0赞 Arkellys 11/17/2023

没问题，别担心。:)

答：

0赞 Arkellys 11/17/2023 #1

打包的应用程序总是比你的源代码大，因为它包含 Electron 二进制文件，大小约为 150mb（适用于 Windows）。您只能优化资源文件夹的大小，该文件夹是打包代码的一部分。

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

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

捆绑文件后，您将不再需要该文件夹，这将增加应用的大小。理想的情况是拥有：node_modules

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

在你的情况下，这意味着你应该告诉 Vite 也捆绑 .我对这个打包器不够熟悉，所以我无法给你一个配置。electron.cjs

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

How can I optimize an Electron JS application size?

评论

评论