Geek Answers Handbook

How to build an optimized Angular 5 project?

I'm new to the Angular 5 project. I ran ng build --prod to create the dist/ folder.

I noticed that it took quite a while to create, and when I opened my dist/ folder, I saw that it had almost 98% useless things like SVG, images, etc.

How can I control what goes into my dist/ ?

.angular-cli.json

 { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "project": { "name": "web" }, "apps": [{ "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico" ], "index": "index.html", "main": "main.ts", "polyfills": "polyfills.ts", "test": "test.ts", "tsconfig": "tsconfig.app.json", "testTsconfig": "tsconfig.spec.json", "prefix": "app", "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css", "../node_modules/ngx-toastr/toastr.css", "../src/assets/css/style.css", "../src/assets/css/colors/blue.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/popper.js/dist/umd/popper.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js", "../node_modules/jquery-slimscroll/jquery.slimscroll.min.js", "../node_modules/pace-js/pace.min.js" ], "environmentSource": "environments/environment.ts", "environments": { "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } }], "e2e": { "protractor": { "config": "./protractor.conf.js" } }, "lint": [{ "project": "src/tsconfig.app.json", "exclude": "**/node_modules/**" }, { "project": "src/tsconfig.spec.json", "exclude": "**/node_modules/**" }, { "project": "e2e/tsconfig.e2e.json", "exclude": "**/node_modules/**" } ], "test": { "karma": { "config": "./karma.conf.js" } }, "defaults": { "styleExt": "css", "component": {} } }

package.json

 { "name": "web", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve --port 4202", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "5.1.0", "@angular/common": "5.0.3", "@angular/compiler": "5.0.3", "@angular/core": "5.0.3", "@angular/forms": "5.0.3", "@angular/http": "5.0.3", "@angular/platform-browser": "5.0.3", "@angular/platform-browser-dynamic": "5.0.3", "@angular/router": "5.0.3", "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.5", "@ngx-translate/core": "8.0.0", "@types/jquery": "3.2.16", "angular2-image-upload": "^1.0.0-rc.0", "bootstrap": "4.0.0-beta.2", "core-js": "2.4.1", "jquery": "3.2.1", "jquery-slimscroll": "1.3.8", "ngx-toastr": "8.0.0", "ngx-uploader": "4.2.1", "pace-js": "1.0.2", "popper.js": "1.13.0", "rxjs": "5.5.0", "sticky-kit": "1.1.3", "zone.js": "0.8.4" }, "devDependencies": { "@angular/cli": "^1.6.4", "@angular/compiler-cli": "5.0.3", "@angular/language-service": "5.0.3", "@types/jasmine": "~2.5.53", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "codelyzer": "~3.2.0", "jasmine-core": "~2.6.2", "jasmine-spec-reporter": "~4.1.0", "karma": "~1.7.0", "karma-chrome-launcher": "~2.1.1", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "0.2.2", "protractor": "~5.1.2", "ts-node": "~3.2.0", "tslint": "~5.7.0", "typescript": "~2.4.2" } }

How do I optimize ? And just build what is required for my site?

It currently takes 15 minutes to build on my server. How to make it faster?

+13
javascript angular webpack angular-cli angular5
source share
7 answers

For a slow build, you can use this version of angular cli:

"@angular/cli": "1.7.0-beta.0",

this reduced my construction time from 30 minutes to 3 minutes.

In angular 5, AOT and build-optimizer are used by default in prod builds.

ng build --prod --named-chunks adding - named-chunks to your build command will give you named fragments so you can better analyze your chunks and better improve what you import in each module. An example that maybe you are importing an entire common module into a specific module, while you are just using one thing from this common module

+12
source share

You need to spend some time analyzing your dependencies and their impact on build results.

Build with:

 ng build --target=production --environment=prod --aot --build-optimizer -sourcemaps --stats-json

(Although some of these arguments are implied, I chose verbosity if the environment was changed outside of the default values.)

Which stats.json file which can then be analyzed using webpack-bundle-analyzer by running: webpack-bundle-analyzer dist/stats.json

Remove unnecessary libraries, reorganize to shake trees, replace irresponsibly large libraries with alternatives.

Without seeing the contents of your package.json, this will give you a starting point for understanding the optimization for production.

Recommendations:

+5
source share

The great tool I found was a source map explorer . This is a tool that shows you the space used for all the imports that you use in the module. The image is an example of my admin module when I launch the source map explorer:

enter image description here

This tool helped me a lot by pointing out some import operations that I forgot to delete and allowing my files to get too large.

+5
source share

This is not garbage, the ng build command will by default get the developer profile and build dist with all the necessary file in your project (for example, ts will be compiled in js). Since it has a default dev profile, you see the thing as a named .chunk file among other things. The developer profile and prod profile also have different dependencies depending on your package.json file.

see https://github.com/angular/angular-cli/wiki/build for

+2
source share

Use this command to optimize the assembly for angular 5/6:

 node --max_old_space_size=5048 ./node_modules/.bin/ngbuild --aot --prod --build-optimizer
+1
source share

You can start brotli compression after building the product, which will reduce load time. https://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/

0
source share

config in angular.json

 "configurations": { "production": { "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot":true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": false, "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ] } }

and create your project:

 node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build --prod --build-optimizer=true --vendor-chunk=true --aot --base-href "/project/app"
-one
source share

More articles:


All Articles