Comment bien construire une optimisation Angulaire 5 Projet?
Je suis nouveau sur Angulaire 5 projet. J'ai couru ng build --prod
pour générer un dist/
dossier.
J'ai remarqué qu'il prend un temps assez long à construire, et quand j'ai ouvert mon dist/
dossier, je l'ai vu a près de 98% trucs inutiles, comme le SVGs, images, et ainsi de suite ..
Comment puis-je contrôler ce qui se passe dans mon dist/
?
.angulaire de la 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": {}
}
}
paquet.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 seulement à construire ce besoin pour mon site?
Actuellement, il prend 15 minutes pour construire sur mon serveur. Comment puis-je faire construire plus vite?
Qu'entendez-vous par 'inutiles'? Aussi ce que tu veux dire avec les optimiser? Plus vite? Les plus petits? Les deux? Si oui, quel est votre niveau actuel de performance?
15 min est de trop. Pouvez-vous donner plus de détails sur la taille totale de la dist dir? Je ne vois pas de choses inutiles dans mon prod construire et il a obtenu seulement les images que j'utilise dans le projet et rien n'est inutile pour moi et prend les 75 secondes. Aussi, il serait grand si vous partagez l'écran une fois la construction terminée.
15 min est de trop. Pouvez-vous donner plus de détails sur la taille totale de la dist dir? Je ne vois pas de choses inutiles dans mon prod construire et il a obtenu seulement les images que j'utilise dans le projet et rien n'est inutile pour moi et prend les 75 secondes. Aussi, il serait grand si vous partagez l'écran une fois la construction terminée.
OriginalL'auteur kyo | 2018-01-25
Vous devez vous connecter pour publier un commentaire.
Pour la construction est lente, vous pouvez utiliser cette version de l'angulaire de la cli:
"@angular/cli": "1.7.0-beta.0",
cette coupe mon temps de construction de 30 minutes à 3 minutes.
Angulaire 5, AOT et de construction optimizer sont par défaut en prod construit.
ng build --prod --named-chunks
l'ajout d'-nommé-blocs pour construire votre commande vous donnera nommé morceaux de sorte que vous pouvez mieux analyser les, vous des morceaux, et de mieux mettre en valeur ce que vous importez dans chaque module.Un exemple qui peut-être vous êtes l'importation de tout module partagé en un certain module pendant que vous utilisez seulement une chose à partir de ce module partagé
Non, Pas vraiment!! l'angulaire de l'équipe est en train de faire de leur mieux pour réduire le temps de construction. La seule chose que j'ai remarqué jusqu'à présent, c'est que construire des tailles de segment a augmenté un peu, ne vous inquiétez pas, je suppose. github.com/angular/angular-cli/issues/...
Après avoir ajouté que, pour ma
package.json
je semble l'avoir cette erreur tout le tempsError: Cannot find module '@angular-devkit/core'
npm-v 5.6.0 / node -v v8.9.4
Avez-vous d'autres suggestions >
OriginalL'auteur Nadhir Falta
Vous avez besoin de prendre un moment pour analyser vos dépendances et l'impact qu'ils ont sur vos constructions dist sortie.
Construire avec:
(Bien que certains de ces arguments sont implicites, j'ai choisi de verbosité dans le cas de l'environnement a été modifié au-delà de valeurs par défaut.)
Qui va sortir un
stats.json
fichier qui peut ensuite être analysées avecwebpack-bundle-analyzer
en cours d'exécution:webpack-bundle-analyzer dist/stats.json
Supprimer les bibliothèques, refactoriser pour l'arbre de secouer, de remplacer, de manière irresponsable, de grandes bibliothèques avec des solutions de rechange.
Sans voir votre package.json contenu de ce devrait vous donner un point de départ pour commencer à comprendre l'optimisation de la production.
Références:
Merci pour les liens que vous avez partagé. Je comprends que ces plus maintenant. J'ai déjà lu ce lien : npmjs.com/package/webpack-bundle-analyzer Mais toujours pas sûr, comment utiliser
webpack-bundle-analyzer
OriginalL'auteur yomateo
Un excellent outil que j'ai trouvé était source de la carte explorer. C'est un outil qui permet à l'espace utilisé pour toutes les importations de produits que vous utilisez dans un module. L'image est un exemple de mon module admin, quand je lance la source de la carte explorer:
Cet outil m'a beaucoup aidé de me pointer certaines importations que j'avais oublié d'enlever et a été de laisser mes fichiers trop volumineux.
OriginalL'auteur Pedro Arantes
C'est pas indésirable, le ng commande build par défaut sera ramasser le profil de développeur et permettra de construire la dist avec tous les fichiers sur votre projet(ts compilé js par exemple). Parce que c'est un dev profil par défaut, vous voyez la chose comme le nom .fichier de segment entre autre chose.Profil développeur et prod profil ont aussi des dépendances différents en fonction de votre colis.fichier json.
voir https://github.com/angular/angular-cli/wiki/build pour
OriginalL'auteur Asura
Utilisez cette commande pour optimiser la construction angulaire de 5/6:
max_old_space_size
sur le nœud processus semble un peu bizarre. Pouvez-vous élaborer davantage sur la façon dont vous avez décidé de ce qui était nécessaire pour votre situation, pourquoi il pourrait s'appliquer à d'autres utilisateurs, et comment il contribue à améliorer les temps de construire? L'ajout de--aot
et--build-optimizer
serait que le build prendre plus de temps que la commande dans la question d'origine.ng build --prod
déjà utilise implicitement à l'avance (AOT) de la compilation, donc pas besoin de-aot
.OriginalL'auteur nagender pratap chauhan