如何减小电子角度应用程序的大小答案

【问题标题】：How to reduce the size of electron angular app如何减小电子角度应用程序的大小
【发布时间】：2020-11-10 14:26:47
【问题描述】：

我正在尝试为 Windows 和 Linux 平台设计一个 Angular 应用程序。我正在使用电子框架。我刚刚构建了一个显示角度主页的简单应用程序。这个应用程序的大小约为 250MB。这太大了。如果有人开发了电子角度应用程序。你能提到你的应用程序的大小吗？以及有关如何减小应用程序大小的任何提示。注意：Angular 应用编译到 /dist，它的大小只有 250KB，但整个应用构建时是 250MB！

** main.js**

const { app, BrowserWindow } = require('electron')

let win;

console.log(__dirname);
function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({
    width: 600, 
    height: 600,
    backgroundColor: '#ffffff',
    icon: `file://${__dirname}/dist/Angular-electron/favicon.ico`
  })


  win.loadURL(`file://${__dirname}/dist//Angular-electron/index.html`)

  //// uncomment below to open the DevTools.
  // win.webContents.openDevTools()

  // Event when the window is closed.
  win.on('closed', function () {
    win = null
  })
}

// Create window on electron intialization
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {

  // On macOS specific close process
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // macOS specific close process
  if (win === null) {
    createWindow()
  }
})

下面是根组件。

app.component.html

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular-electron';
 
}

这是 package.json 脚本，我构建了 angular 并同时构建了 electron 如下图所示注意：我使用电子打包器来构建应用程序以进行生产。

"builderForWindows": "ng build --prod && electron-packager ./dist --out winx64 --overwrite --platform win32 "

以下是应用程序的屏幕截图。

【问题讨论】：

如果问题需要更多细节，请告诉我:)
我可能弄错了，但 250mb 还包括捆绑的 chromium 和 node.js。
Electon 应用程序包括整个 Angular 发行版和 node.js 和 chromium！你的 dist 的大小只是实际输出的一小部分。如果你想要一个小尺寸的电子可能不适合你。

标签： javascript node.js angular electron

【解决方案1】：

当您为 Electron 构建应用程序时，它会将您的所有依赖项添加到 package.json 的 dependencies 部分

尝试将所有角度依赖项移至package.json 的devDependencies 部分

这应该会减小您最终包裹的大小。

否则，您应该查看 electron-builder 并开始将您的应用构建为 Linux/MacOS/Windows 包。

例如，我的electron-angular 项目生成一个 45Mo Windows 可执行文件。

【讨论】：