CODEWITHSUNDEEP
angularwebpack
Nicolas S.Xu
Nicolas S.Xu

Reputation: 14534

An empty Angular2 app has 911k vendor.js after uglify. How to make Angular2 web app smaller?

I am 100% following the official guide here to build an starter Angular2 and webpack project.

After production build success, I found out the

Those sizes are after uglify and minify.

Upvotes: 1

Views: 74

Answers (2)

Yakov Fain
Yakov Fain

Reputation: 12376

If this an Angular CLI app, add AoT to the build:

ng build --prod --aot

  1. You'll get potentially smaller sizes of the files even though at this point AoT seems to be making good impact on smaller apps (your case) and not on the large ones.

  2. As @EternalLight mentioned, use the Web server that can serve pre-created gziped files, e.g. Node Static https://www.npmjs.com/package/node-static. Take a look at the sample package.json here: https://github.com/Farata/angular2typescript/blob/master/chapter10/angular2-webpack-starter/package.json

Upvotes: 1

EternalLight
EternalLight

Reputation: 1328

Surely, Angular 2 is famous for its size. I suggest:

  1. Set up your web server to serve gzipped JS-files. My Angular 2 application's main JS file (with a bunch of third-party ng2 modules) is about 1.6 Mb. But it seems to be only 337 Kb after gzipping.
  2. Cache your main JavaScript file (and other static assets) with a service worker, so that you users have to download it fully only for the first time.

Upvotes: 1

Related Questions