web-dev-qa-db-fra.com

Comment construire correctement un projet optimisé Angular 5?

Je suis nouveau dans le projet Angular 5. J'ai exécuté ng build --prod Pour générer un dossier dist/.

J'ai remarqué qu'il prenait beaucoup de temps à compiler et quand j'ai ouvert mon dossier dist/, J'ai constaté qu'il contenait près de 98% de choses inutiles, telles que des SVG, des images, etc.

Comment contrôler ce qui se trouve dans mon 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"
  }
}

Comment puis-je optimiser? Et ne construisez que ce qui est nécessaire pour mon site?

Actuellement, il faut 15 minutes pour construire sur mon serveur. Comment puis-je le faire construire plus rapidement?

javascriptangularwebpackangular-cliangular5
14
kyo

Pour que la construction soit lente, vous pouvez utiliser cette version du angular cli:

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

cela a réduit mon temps de construction de 30 minutes à 3 minutes.

Dans Angular 5, AOT et l'optimiseur de build sont par défaut des builds prod.

ng build --prod --named-chunks ajouter des morceaux nommés à votre commande de construction vous donnera des morceaux nommés afin que vous puissiez mieux analyser vos morceaux et améliorer ce que vous importez dans chaque module. Exemple: vous importez peut-être l'intégralité du module partagé dans un certain module alors que vous n'utilisez qu'une chose de ce module partagé

12
Nadhir Falta

Vous devez prendre un moment pour analyser vos dépendances et l’impact qu’elles ont sur votre sortie de builds.

Construire avec:

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

(Bien que certains de ces arguments soient implicites, j'ai choisi la verbosité dans le cas où l'environnement aurait été modifié au-delà des valeurs par défaut.)

Ce qui produira un stats.json fichier pouvant ensuite être analysé avec webpack-bundle-analyzer en exécutant: webpack-bundle-analyzer dist/stats.json

Supprimez les bibliothèques inutiles, refactorisez le tremblement de l’arbre, remplacez les grandes bibliothèques irresponsables par des alternatives.

Sans voir le contenu de votre package.json, cela devrait vous donner un point de départ pour comprendre l'optimisation de la production.

Les références:

6
yomateo

Un excellent outil que j'ai trouvé était source map Explorer . C'est un outil qui vous montre l'espace utilisé pour toutes les importations que vous utilisez dans un module. L'image est un exemple de mon module d'administration lorsque j'exécute l'explorateur de carte source:

enter image description here

Cet outil m'a beaucoup aidé en me montrant des importations que j'avais oublié de supprimer et laissait mes fichiers trop volumineux.

5
Pedro Arantes

Ce n'est pas indésirable, la commande ng build par défaut récupérera le profil du développeur et construira la dist avec tout le fichier requis sur votre projet (ts sera compilé en js par exemple). Parce que c'est un profil dev par défaut, vous voyez quelque chose comme le fichier .chunk nommé, entre autres choses. Le profil developer et le profil prod ont également des dépendances différentes en fonction de votre fichier package.json.

voir https://github.com/angular/angular-cli/wiki/build pour

2
Asura

Utilisez cette commande pour optimiser la construction de angular 5/6:

node --max_old_space_size=5048 ./node_modules/.bin/ngbuild --aot --prod --build-optimizer
1
nagender pratap chauhan

vous pouvez exécuter brotli compression après la construction de la production, ce qui améliorera le temps de chargement. https://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/

0
Sanju M