2

I have an Electron and Anguarjs CLI app that I want to distribute.

After running ng build --prod I get a dist directory that is ~1Mb. However after running electron-packager . the app is ~350Mb.

I have my electron main.js setup to point to the index.html of the dist, but I am guessing that the package command doesn't use the dist to build the app but rather the bloated dev version. I have tried running electron-packager . from within dist, it still creates a huge app.

Is there a way to package the dist folder? Should I rather be using a different packaging tool?

My aim is to package the app so that doesn't nuke band width to distribute.

zgue
  • 3,793
  • 9
  • 34
  • 39
avn
  • 822
  • 1
  • 14
  • 31
  • 1
    The dist directory does not contain node_modules. Electron packages your app (from dist) together with required code from node_modules and node environment. This is why your image is much bigger than dist directory. – rzelek Mar 02 '18 at 17:13

1 Answers1

1

From the electron-packager readme.md:

Be careful not to include node_modules you don't want into your final app. If you put them in the devDependencies section of package.json, by default none of the modules related to those dependencies will be copied in the app bundles.

The angular CLI uses webpack internally to bundle your code. To reduce the electron package size, whatever is already bundled by webpack that's currently in your dependencies section of your package.json can go in the devDependencies section instead. That'll prevent electron-packager from bundling any node_modules code you aren't actually referencing due to webpack having already extracted it when bundling the output chunks in your dist folder.

rob3c
  • 1,936
  • 1
  • 21
  • 20
  • Good suggestion. I will need to take time to make sure I strip out any unnecessary includes. I wonder if the Angular includes aren't the culprits. I don't have that much packages included. – avn Mar 08 '18 at 09:05
  • Current dependencies: angular - animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router other - bootstrap,core-js,eonasdan-bootstrap-datetimepicker,jquery,machine-uuid,moment,ng2-eonasdan-datetimepicker,ngx-electron,ngx-select-ex,rxjs,zone.js – avn Mar 08 '18 at 09:10
  • I think webpack is already bundling all of that angular code in the vendor bundle, so it's a likely candidate for moving to `devDependencies`. – rob3c Mar 09 '18 at 03:04