2

I'm getting into Angular2. I've created a very simple test project to start testing what I'm learning.

Basically this is my project right here: https://github.com/developer82/ReactJS.vs.Angular2/tree/master/angular2

I've started it from a sample project that I've downloaded from the internet. But once I run npm install it download a bunch of NPM packages and now the directory is about 100mb in size for a very very small application.

Obviously that is not the final project that one would upload to production. I know that a lot of the packages are not needed and some are for running a server that will run the app.

In ng-conf this year they were very proud to announce that Angular2 is 45kb - smaller than Angular1. So my question is - lets say I've built my Angular2 app - now what? How do I compile everything to the minimal size and only the needed packages? how does it all combine to a one 45kb file? Or in other words - I've built my app - what's next in order to publish it?

EDIT

I followed the instructions of the angular-cli tool (https://github.com/angular/angular-cli#installation).

Creating a new project created a directory with the size of 150+ mb. But after running ng build -prod it produces a directory with size of 1mb - much much smaller and with ease, but there I see that angular is not main.js which is 675kb in size - far from the 45kb that they talked about in ng-conf. And that without taking into account all other js libraries that also need to be loaded (system, es6-shim, reflect, zone).

That's way to big for a web application (especially if targeted for mobile devices as well). How can we make it (much) smaller?

Francesco Borzi
  • 56,083
  • 47
  • 179
  • 252
developer82
  • 13,237
  • 21
  • 88
  • 153

2 Answers2

0

Another approach would be to leverage Gulp to compile and package your application. For this you could use the following plugins:

  • gulp-typescript - compile TypeScript content into JavaScript
  • gulp-uglify - minify JavaScript content
  • gulp-concat - concat files
  • gulp-html-replace - reference the newly

See this question for more details:

And the corresponding project:

Community
  • 1
  • 1
Thierry Templier
  • 198,364
  • 44
  • 396
  • 360
0

The bundle can still be gzipped, I used SystemJS Builder and I get from 576KB (not-gzipped) to 122KB (gzipped). Maybe can be smaller with template compiler, which the angular team is still working on.

Antony Budianto
  • 101
  • 1
  • 7
  • yeah. I'm waiting for template compiler which will also remove unnecessary includes and will not include compiler code in framework - which will make the application much smaller. – developer82 May 24 '16 at 14:48