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

电子生成器MSI安装程序asar文件太大

asar electron-builder electron npm angular

Ada · 技术社区 · 2 年前

我有一个Angular应用程序,我需要为它创建一个MSI安装程序。我已经成功创建了一个电子应用程序( npm run electron ),但当我尝试创建安装程序时,会出现以下错误:

错误LGHT0263:“C:。。。\release\win unpacked\resources\app.asar'是太大,文件大小必须小于2147483648。

我按以下顺序运行命令:

npm运行电子 -->运行电子应用程序本身,看看它是否有效(在执行下一步操作之前,我关闭了应用程序)
npm run tsc
npm run step2
npm run electron:build

我认为我在electronic-builder.json中包含了太多文件,但我不确定我可以删除什么,以及运行应用程序需要什么,因为这是我第一次使用electronic-and-electronic-bbuilder。

当我设置 "asar": false 在electron-builder.json中,MSI安装程序已创建,但我收到警告 asar usage is disabled â this is strongly not recommended ,它需要花费很长时间(即30分钟)来构建,并且MSI数据包的大小几乎为1.5GB。

有人知道我如何尽快缩小尺寸吗?

这是我的项目结构:

|- dist
|- electron
   |- main.ts
   |- package.json
|- node_modules
|- release
|- src
   |- all angular source code
|- angular.json
|- electron-builder.json
|- package.json
|- tsconfig.json
|- tsconfig.serve.json

package.json中的脚本:

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "electron": "ng build --configuration electron && electron .",
    "tsc": "tsc -p tsconfig.serve.json",
    "step2": "ng build --base-href ./ --configuration electron",
    "electron:build": "electron-builder build --publish=never"
  }

electro-builder.json:

{"asar": true,
  "directories": {
    "output": "release/"
  },
  "files": [
    {
      "from": "dist",
      "filter": ["**/*"]
    },
    {
      "from": "electron",
      "filter": ["**/*"]
    },
    {
      "from": "src",
      "filter": ["**/*"]
    },
    "!**/*.ts",
    "!*.map",
    "!package.json",
    "!package-lock.json",
    "!node_modules/**",
    "!.angular/**",
    "!.vscode/**",
    "!cypress/**",
    "!release/**"
  ],
  "win": {
    "icon": "offline-test.ico",
    "target": [
      "msi"
    ]
  }
}

tsconfig.server.json:

{
  "compilerOptions": {
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "target": "es2015",
    "types": [
      "node"
    ],
    "lib": [
      "es2017",
      "es2016",
      "es2015",
      "dom"
    ]
  },
  "files": [
    "electron/main.ts"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

我看了看 this question ,但我想我正在排除MSI文件所在的目录,所以我不确定还能排除什么。

2 回复 | 直到 2 年前

Arkellys 2 年前

我从来没有使用过Angular,所以我不能给你完整的工作配置,但无论使用什么库,通常在为Electron打包时,你首先想捆绑你的文件,然后 只打包这些文件 .

大致来说,您应该:

将渲染器、主文件和预加载文件(如果有)捆绑到一个输出文件夹中
确保使用不同的输出文件夹进行绑定和打包(以防止冲突)
告诉构建器只打包bundle输出文件夹
添加无法手动绑定的模块(如果有)

一旦你把所有东西都整齐地放在输出文件夹中(我收集到Angular的默认值是 dist/[project-name] ),然后可以配置 electron-builder 照着

{
  "extraMetadata": {
    // This will change the `main` field of your `package.json`,
    // so electron-builder will use the file made for prod.
    "main": "dist/[project-name]/[path-to-bundled-main-file]"
  },
  "files": [
    "./dist/[project-name]/**/*"
  ]
}

对于无法绑定的本机模块,可以使用 asarUnpack 选项将它们包含在包中。

此外,如果我没有错的话,Angular CLI使用webpack进行捆绑,因此您可能需要使用 target electron-main 和 electron-preload 捆绑您的Electron文件,使一切正常工作。

jo-cor 2 年前

我的最后一个app.asar文件是~187Mb

我的最终.exe文件是~168Mb

我的安装程序大约为870Mb

我仍在清理东西,到目前为止,我通过设置明确排除了SRC代码(仍在开发环境中,所有内容都在相同的文件夹中)

{
  ...
  "build": {
    "asar": true,
    "files": [
      "!src/**",
      "!.vscode/**"
    ]
   ...
}

检查ASAR文件的内容(安装7-Zip和配套插件Asar7z),确保没有包含不需要的文件