Menu
I'm using Angular-Cli with its default project.
I'm trying to get a production version of code, so I'm running --prod and at the output I see 911 KB, is it possible to optimize it further? And how can I tell angular to serve the gzip file?
ng serve --prod
FYI: I tried ng serve --prod --aot but the server is building again in a loop. However, when I tried ng build --prod --aot then I see the size is reduced but I cannot start the server.
ng build --prod --aot
Below is the code which I'm using in the Package.json file
{
"name": "angular2-quickstart",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"core-js": "^2.4.1",
"rxjs": "5.0.0-beta.12",
"ts-helpers": "^1.1.1",
"zone.js": "^0.6.23"
},
"devDependencies": {
"@types/jasmine": "^2.2.30",
"angular-cli": "1.0.0-beta.16",
"codelyzer": "~0.0.26",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.9",
"ts-node": "1.2.1",
"tslint": "3.13.0",
"typescript": "2.0.2"
}
}
320
Use latest angular cli version and use command ng build --prod --build-optimizer It will definitely reduce the build size for prod env.
ng build --prod is what most people do when it comes to down sizing their apps. However, there is also another size control feature that’s not commonly talked about in beginner’s circle of Angular and it’s called budgets. This allows you to set thresholds that will alert you if your app grows physically too big.
Go to your angular.json file and scroll down the production section of configurations There is already a default of maximum warning set at 2MB and for the build process to error out and refuse to produce a build at 5MB. 3.
You can analyze your Angular bundle by running the following command: webpack-bundle-analyzer <path-to-stats.json> This kicked off a simple server containing the analysis that you need. After navigating to localhost:8888, you can see the different libraries in your app relative to their size. Wow!
Angular’s budgets mechanism will give you warnings or errors once your application reaches a certain size during the build process. The overall size of your application matters because your users are paying for a large application with time (and potentially, limited mobile data).
First, since all web servers now gzip output, your actual size is not the .js file size, but the .gz file size. That's the sole reason this file was created as I understand, to show you the realistic gzipped size.
However, there's room for better sizes, 40%+ improvement. If you install and use Angular CLI beta 16 for example (current version at time of writing), it has AoT compiler out of the box.
Run it like that:
ng build -prod --aot
As of beta-16 there're some issues with watch / serve and AoT at the moment though, like this, so you might for now only use it for actual production generation not dev server.
Starting the next release after beta.26, --aot will be on by default when you use -prod.
It's currently merged into master.
149
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
