Très grand nombre de fichiers générés pour chaque Angulaire du projet

Je voulais commencer un simple hello world app Angulaire.

Lorsque j'ai suivi les instructions officielles démarrage rapide l'installation créé de 32 000 fichiers dans mon projet.

J'ai pensé que c'est une erreur ou j'ai raté quelque chose, j'ai donc décidé d'utiliser angulaires-cli, mais après la mise en place du projet, j'ai compté plus de 41,000 fichiers.

Où ai-je fait de mal? Ai-je raté quelque chose de vraiment vraiment évident?

  • Il est normal pour des projets alimenté par NPM.
  • Pourquoi voudriez-vous même pas la peine comptage du nombre de fichiers. Si votre hello world app fonctionne, tout va bien
  • parce que mon déploiement (google app engine) permet seulement 10K fichiers
  • Oui, et je pense que c'est trop horrible. Mais beaucoup de ces fichiers sont nécessaires uniquement pour le débogage! Par exemple: "lite-server', un léger (ironie ici, je suppose) de serveur web.
  • Quand enfermé, il ne prend que 1 fichier
  • J'ai eu le même problème une fois, et le "skip_files" l'expression dans l'application.yaml. Avec cela, vous pouvez dire GAE les fichiers ou les répertoires à ne pas télécharger
  • Pour quiconque est curieux de connaître le nombre de votes sur cette question et ses réponses, ce qui fait que les HN en première page. news.ycombinator.com/item?id=12209028
  • le très grand nombre de fichiers que vous voyez sont des modules npm, qui vont dans le dossier node_modules. Ce dossier n'est pas destiné à être déployé ou archivé, et est destiné à être créé de façon dynamique pendant la phase de construction/déploiement à l'aide de npm install. Vous ne doit être déploiement de quelques petits fichiers et le déploiement doit ensuite restaurer le mécanisme national de prévention de paquets sur le serveur.
  • sorte de tangentielle, mais pertinent, stackoverflow.com/questions/25124844/...
  • Pour comparaison, j'ai un réagir/redux/routeur projet qui est d'environ 6 mois. J'ai compté node_modules: 101k fichiers en 761 modules. Nombre de fichiers déployés sur le serveur: 1.
  • Je parie que vous vous engagez .Les fichiers DS_Store à git en tant que bien.
  • Êtes-vous à l'aide de Google App Engine pour un côté client web app? Si oui, pourquoi? Si vous utilisez Angulaire 2 sur le côté serveur on peut avoir un problème, mais je doute que vous êtes.
  • comme la plupart des sur le web, il est probablement client et le code serveur. GAE sert des fichiers statiques, comme configuré par l'app.yaml
  • Je pense que "Si votre hello world app fonctionne, tout va bien" n'est pas une bonne philosophie à suivre, surtout pour quelqu'un qui est de l'apprentissage. L'OP est exactement droit de se demander pourquoi autant de fichiers ont été créés. L'exemple lui-même les références à seulement 5 fichiers. Et honnêtement, toute application qui a plus de fichiers qu'il y a de lettres dans sa sortie doit être remis en question.
  • Vous pouvez tous les faire valoir, mais j'ai juste compris ca angulaire dans mon projet et il fait 0 de nouveaux fichiers ...
  • jamais entendu parler de groupage de vos sources pour quelques fichiers avant de les déployer?
  • avez-vous un lien comment puis-je configurer angulaire 2 à partir de cdn?
  • En fait j'ai utilisé angulaire 1 (désolé), mais il semble que cela fonctionne incorporer.plnkr.co/9Xbw3M/preview
  • Pour créer et exécuter générer l'utilisation de ng build --prod il dicrease montant de fichier dans le répertoire dist et il va augmenter la vitesse angulaire du projet, il suffit de donner dist chemin d'accès au dossier, puis à haute vitesse de projet
  • Je suis le seul ici qui pense que c'est juste I N S A N E. quelque Chose a terriblement mal. Je comprends que je peux créer un bundle et déployer un seul fichier. Des beaux. Mais de télécharger des milliers de fichiers à partir de GitHub... Qui a conçu ce?
  • c'est drôle la façon dont vous posté la question concernant la limite de fichier, mais si vous utilisez angulaires-cli, alors vous pouvez construire l'application à l'aide , ng build qui vous permet de convertir tous les type de fichiers de script et de les combiner dans moins d'un fichier.
  • à l'aide de fil peut alse intéressantes. voir la différence entre les fils et npm ici : https://www.sitepoint.com/yarn-vs-npm/
  • J'ai également été choqué par la quantité de fichiers .... m'attendais à plus de simplicité ....
  • Presque 500 MO en taille. le pire, c'est qu'il téléchargés de nouveau pour chaque dossier de projet.
  • Bienvenue à NPM

InformationsquelleAutor Moshe Shaham | 2016-08-02
  1. 334

    Il n'y a rien de mal avec votre configuration.

    Angulaire (depuis la version 2.0) utilise des modules npm et dépendances pour le développement. C'est la seule raison pour laquelle vous assistons à un très grand nombre de fichiers.

    Une configuration de base Angulaire contient transpiler, typings dépendances qui sont essentiel à des fins de développement uniquement.

    Une fois que vous avez fini avec développement, tout ce que vous devez faire est de regrouper cette application.

    Après le regroupement de votre demande, il n'y aura qu'un seul bundle.js fichier que vous pouvez ensuite déployer sur votre serveur.

    'transpiler' est seulement un compilateur, merci @omninonsense pour l'ajout que.

    • Il a aussi apporte en général les données de test et des tests et des outils de développement pour les dépendances et de leurs dépendances et ainsi de suite.
    • Un "transpiler" est seulement un compilateur.
    • mais compile dans une autre langue, au lieu de byte-code ou code machine
    • Un compilateur est un programme qui code dans Un, de produire temporelle T, et de transformer T en finale B. B est généralement de code binaire pour un vrai CPU, mais peut être un autre langage de programmation. Un compilateur n'a pas besoin de générer du code octet.
    • L'5 Min de démarrage Rapide contient beaucoup plus de modules que nécessaire pour fonctionner. Vous n'avez pas besoin de "routeur', 'routeur-amortissement, les formes, ou" angular2-à-mémoire-web-api".
    • Byte code et/ou le code Machine est une autre langue. Le terme "transpiler" n'a pas d'autre sens que "compilateur".
    • À l'égard de tous, je ne suis pas sûr que la sémantique de l'argument est vraiment pertinente pour des OP question ^^
    • Si je suis en train de lire le droit de réponse, est-ce à dire que Angulaires 2 a 40k (!!) dépendances (y compris transitive un) sur des modules externes? Ou pourriez-vous développer le lien entre Angulaire 2 utilise des modules npm et dépendances pour le développement et une telle irréaliste nombre de fichiers?
    • non, pas vraiment. Chaque projet comporte un certain nombre de fichiers. Par exemple, lodash a 1021 fichiers sur la version, j'ai juste téléchargé. (Certes, c'est probablement plus que la moyenne, mais le point reste). Pour ne pas mentionner le mécanisme national de prévention de l'écosystème est conçu pour être très modulaire, de sorte que chaque dépendance a pas mal d'autres dépendances.
    • Bienvenue à JavaScript dépendance de l'enfer. Il donne un coup de pied dans une fois que vous commencez composants à mettre à jour 🙂
    • Le grand nombre de fichiers tiges de mnp. Angulaire 2 au moment de la construction de dépendances sont basés sur les mnp, qui utilise une mauvaise récursive système de fichiers à base de système de dépendance. Ce ne sont pas 40k différentes dépendances, ils sont peut-être 1-5k dépendances et d'un tas de copies redondantes des mêmes fichiers, encore et encore. Cela étant dit, un avant-projet de fin ne devrait pas être le déploiement de quelque chose de node_modules, si quelque chose est définitivement un problème avec la configuration de déploiement si ces fichiers sont inclus.
    • Ce n'est pas ce que l'enfer de la dépendance des moyens; vérifier la définition. mnp est l'un des rares gestionnaires de paquets que ne pas souffrent de la dépendance de l'enfer par la conception.
    • Soin de préciser sur le "récursive" partie?
    • Si nous n'avions pas de hors-sujet sémantique des arguments dans la section des commentaires, je ne suis pas sûr que je voudrais vous rappeler que je suis sur LE!
    • comme dans les dépendances transitives sont contenues dans leurs parent dépendance du dossier node_modules, et ainsi de suite récursivement. C'est pourquoi, vous pourriez avoir plusieurs centaines de copies de certains fichiers à partir des principaux modules npm - parce que beaucoup d'autres modules ont des dépendances sur eux et ainsi de suite. Ceci est en contraste à un "plat" système de dépendance où toutes les dépendances sont au même niveau de la racine sans doublons.
    • ensuite, il est intéressant de noter que ce n'est plus le cas dans les mnp v3, qui a été le défaut sur le Nœud pour un bon moment déjà.
    • npm v3 tente d'aplatir l'arbre des dépendances, mais ne peuvent le faire lors des "doublons" sont de la même version. Sinon il retombe à l'v2 comportement qui est imbriqué. C'est une grande amélioration pour être sûr, mais de gros fichier compte sont encore courantes.
    • techniquement, un transpiler n'est pas un équivalent exact d'un compilateur. Un transpiler prend le code source d'un programme écrit dans un langage et les convertit en code source dans un autre langage de programmation. Dans ce cas, votre fichier d'enregistrement de code est converti en Javascript et ensuite votre Javascript est compilé.
    • un compilateur est un programme qui se traduit d'une langue source vers une langue cible, comme Tei expliqué. Le fait que la langue cible est également lisible par l'homme ne veut pas dire que le compilateur est moins d'un compilateur. Toutefois, vous pouvez utiliser transpiler comme un synonyme de "source-à-source" compilateurs; je ne veux pas laisser entendre il y a quelque chose de mal avec la parole lors de l'envoi du commentaire. 🙂
    • transpiler = Traduire + compilateur

    InformationsquelleAutor Bhushan Gadekar
  2. 135
                                    Typical Angular2 Project

    NPM Package                       (Fichiers de Développement)                   Monde Réel des Fichiers (Déploiement) 

    @angular                       3,236                             1
rxJS                           1,349                             1*
core-js                        1,341                             2
typings                        1,488                             0
gulp                           1,218                             0
gulp-typescript                1,243                             0
lite-server                    5,654                             0
systemjs-builder               6,470                             0
__________________________________________________________________
Total                         21,999                             3

    *: bundled with @angular

    [ voir cette regroupant un ensemble de processus ⇗ ]

    • Je suppose que -3 a été donné pour ne pas en faire la somme, mais maintenant j'ai 🙂
    • qu'entendez-vous par monde réel des fichiers?
    • monde fichiers" est le nombre de fichiers lorsque votre projet est déployés ou production.
    InformationsquelleAutor Ankit Singh
  3. 49

    Il n'y a rien de mal avec votre développement de configuration.

    Quelque chose de mal avec votre production de configuration.

    Lorsque vous développez un "Angulaire 2 Projet" ou "Aucun Projet, Qui repose sur JS" vous pouvez utiliser tous les fichiers, vous pouvez essayer tous les fichiers, vous pouvez importer tous les fichiers. Mais si vous voulez vous servir de ce projet, vous devez COMBINER tous les fichiers structurés et de se débarrasser des fichiers inutiles.

    Il y a beaucoup d'options pour combiner ces fichiers:

    • Vous ne devriez pas (citation nécessaire) être la concaténation de fichiers sur le serveur. Tout au plus, je voudrais utiliser une transpiler.
    • Transpilers sont source-à-source de compilateurs. Je pense qu'ils ne peuvent changer de "X" pour "JS". Fichier compte sont les mêmes.
    • ..Oui, mais je ne suis pas sûr de votre point de vue. Mon point est que vous ne devriez pas essayer de minifier le code serveur (par concaténation de fichiers et donc de réduire la taille du fichier). Tout au plus, vous devez utiliser Babel sur votre code si vous utilisez des saignements fonctionnalités comme async/await.
    • Je suis d'accord avec vous. Mais sur les commentaires interlocuteur dit "parce que mon déploiement (google app engine) permet seulement 10K fichiers". Dans ces conditions, nous avons besoin de minifier les fichiers compte.
    • Je serai d'accord avec vous, mais l'OP semble avoir un XY question ici
    InformationsquelleAutor hurricane
  4. 29

    Que plusieurs personnes déjà mentionnées: Tous les fichiers dans votre répertoire node_modules (MNP emplacement pour les paquets) dans le cadre de votre projet de dépendances (appelées dépendances directes). Comme un plus, vos dépendances peuvent également avoir leurs propres dépendances et ainsi de suite etc. (Appelées dépendances transitives). Plusieurs dizaines de milliers de fichiers ne sont rien de spécial.

    Parce que vous n'êtes autorisé à télécharger 10'000 fichiers (Voir les commentaires), je voudrais aller avec bundler moteur. Ce moteur permettra de regrouper toutes vos JavaScript, CSS, HTML, etc ... et créer un lot unique (ou plus si vous le préciser). Votre index.html va charger ce bundle et c'est tout.

    Je suis un fan de webpack, donc mon webpack solution permettra de créer un bundle d'application et un vendeur bundle (Pour la pleine application de travail voir ici https://github.com/swaechter/project-collection/tree/master/web-angular2-example):

    index.html

    <!DOCTYPE html>
<html>
<head>
    <base href="/">
    <title>Webcms</title>
</head>
<body>
<webcms-application>Applikation wird geladen, bitte warten...</webcms-application>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>

    webpack.config.js

    var webpack = require("webpack");
var path = require('path');
var ProvidePlugin = require('webpack/lib/ProvidePlugin');
var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
var UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
/*
* Configuration
*/
module.exports = {
devtool: 'source-map',
debug: true,
entry: {
'main': './app/main.ts'
},
//Bundle configuration
output: {
path: root('dist'),
filename: '[name].bundle.js',
sourceMapFilename: '[name].map',
chunkFilename: '[id].chunk.js'
},
//Include configuration
resolve: {
extensions: ['', '.ts', '.js', '.css', '.html']
},
//Module configuration
module: {
preLoaders: [
//Lint all TypeScript files
{test: /\.ts$/, loader: 'tslint-loader'}
],
loaders: [
//Include all TypeScript files
{test: /\.ts$/, loader: 'ts-loader'},
//Include all HTML files
{test: /\.html$/, loader: 'raw-loader'},
//Include all CSS files
{test: /\.css$/, loader: 'raw-loader'},
]
},
//Plugin configuration
plugins: [
//Bundle all third party libraries
new CommonsChunkPlugin({name: 'vendor', filename: 'vendor.bundle.js', minChunks: Infinity}),
//Uglify all bundles
new UglifyJsPlugin({compress: {warnings: false}}),
],
//Linter configuration
tslint: {
emitErrors: false,
failOnHint: false
}
};
//Helper functions
function root(args) {
args = Array.prototype.slice.call(arguments, 0);
return path.join.apply(path, [__dirname].concat(args));
}

    Avantages:

    • Version complète en ligne (TS peluchage, la compilation, la minification etc.)
    • 3 fichiers pour le déploiement --> Seulement quelques-uns de requête Http

    Inconvénients:

    • Plus le temps de construction
    • Pas la meilleure solution pour Http 2 projets (Voir l'avertissement)

    Avertissement: C'est une bonne solution pour Http 1.*, parce qu'il minimise la charge pour chaque requête Http. Vous n'avez qu'une demande de votre index.html et chaque ensemble, mais pas pour le 100 - 200 fichiers. Pour le moment, c'est le chemin à parcourir.

    Http 2 sur l'autre main, tente de minimiser le Http généraux, de sorte qu'il est basé sur un protocole de flux. Ce flux est en mesure de communiquer dans les deux sens (Client <--> Serveur) et comme une raison de la plus intelligente des ressources de chargement est possible (on ne charge que les fichiers requis). Le flux élimine une grande partie de la Http généraux (Moins Http allers-retours).

    Mais c'est la même qu'avec IPv6: Il faudra quelques années jusqu'à ce que les gens vont vraiment utiliser le protocole Http 2

    • Pas nécessaire, mais, depuis l'OP mentionné à l'aide de angular-cli qui est déjà fourni avec un système de regroupement (le même suggéré webpack).
    • Oui, en plus moderne versions. Mais en 2016 SystemJS et de la CLI est la façon de faire (avec Plaisir que nous avons webpack maintenant)
    InformationsquelleAutor swaechter
  5. 21

    Vous devez vous assurer que vous êtes tout simplement le déploiement de la dist (court distribuable) dossier de votre projet généré par le Angulaire de la CLI. Cela permet à l'outil de prendre de votre code source et de ses dépendances et de vous donner uniquement ce que vous avez besoin pour exécuter votre application.

    Cela étant dit, il y a eu un problème avec l'ouverture Angulaire de la CLI en ce qui concerne la production s'appuie par l'intermédiaire du `ng build --prod

    Hier (le 2 août 2016) une version a été faite, qui commutation de la construction de mécanisme de brocoli + systemjs à webpack qui gère correctement la production s'appuie.

    Sur la base de ces étapes:

    ng new test-project
ng build --prod

    Je vois un dist de la taille du dossier de 1.1 MO à travers le 14 fichiers répertoriés ici:

    ./app/index.js
./app/size-check.component.css
./app/size-check.component.html
./favicon.ico
./index.html
./main.js
./system-config.js
./tsconfig.json
./vendor/es6-shim/es6-shim.js
./vendor/reflect-metadata/Reflect.js
./vendor/systemjs/dist/system.src.js
./vendor/zone.js/dist/zone.js

    Note Actuellement pour installer le webpack version de l'angle de la cli, vous devez exécuter... npm install angular-cli@webpack -g

    InformationsquelleAutor Brocco
  6. 14

    Angulaire lui-même a beaucoup de dépendances, et la version bêta de la CLI de téléchargements de quatre fois plus de fichiers.

    C'est comment créer un simple projet moins les fichiers ("seulement" 10K fichiers)
    https://yakovfain.com/2016/05/06/starting-an-angular-2-rc-1-project/

    InformationsquelleAutor Yakov Fain
  7. 12

    Semble comme personne ne l'avons mentionné Avance sur le Temps de Compilation, comme décrit ici: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

    Mon expérience avec Angulaires jusqu'à présent, c'est que AoT crée le plus petit construit avec presque pas de temps de chargement. Et le plus important que la question ici est de - vous seulement besoin d'envoyer plusieurs fichiers à la production.

    Ce qui semble être à cause de l'Angulaire compilateur ne sera pas livré avec la production se construit alors que les modèles sont compilés "à l'Avance". Il est aussi très cool de voir votre modèle HTML balisage transformé javascript instructions qui serait très difficile à inverser ingénieur dans le HTML d'origine.

    J'ai fait une simple vidéo où je montre de taille de téléchargement, le nombre de fichiers etc. pour un Angulaires app dev vs AoT de construire que vous pouvez voir ici:

    https://youtu.be/ZoZDCgQwnmQ

    Vous trouverez le code source de la démo ici:

    https://github.com/fintechneo/angular2-templates

    Et - comme tous les autres, dit ici - il n'y a rien de mal quand il y a de nombreux fichiers dans votre environnement de développement. C'est la façon dont il est avec toutes les dépendances qui vient Angulaire, et de nombreux autres modernes de cadres. Mais la différence ici est que lors de l'expédition de la production, vous devriez être en mesure de l'emballer dans quelques fichiers. Aussi, vous ne voulez pas que tous ces fichiers de dépendance dans votre dépôt git.

    InformationsquelleAutor Peter Salomonsen
  8. 8

    Ce n'est effectivement pas Angulaire spécifique, il arrive avec presque n'importe quel projet qui utilise la NodeJs /mnp écosystème de son outillage.

    Ces projets sont à l'intérieur de votre node_modules dossiers, et sont les transititve les dépendances de vos dépendances directes ont besoin pour fonctionner.

    Dans le nœud de l'écosystème de modules sont généralement de petite taille, ce qui signifie qu'au lieu de développer des choses nous-mêmes, nous avons tendance à importer la plupart de ce que nous avons besoin sous la forme d'un module. Cela peut inclure de telles petites choses comme la célèbre gauche de la fonction pad, pourquoi l'écrire nous-mêmes s'il n'est pas un exercice ?

    Afin d'avoir un grand nombre de fichiers son en fait une bonne chose, cela signifie que tout est très modulaire et module auteurs fréquemment réutilisés à d'autres modules. Cette facilité de modularité est probablement l'une des principales raisons pour lesquelles le nœud de l'écosystème a grandi si vite.

    En principe, cela ne devrait pas poser de problème, mais il semble que vous exécutez dans un google app engine fichier de limite de nombre. Dans je cas, je suggère de ne pas transférer les node_modules à app engine.

    au lieu de construire l'application localement et de les télécharger pour google app engine seulement le lot de filesn mais ne pas le construire dans l'app moteur lui-même.

    InformationsquelleAutor Angular University
  9. 7

    Si vous utilisez angulaire de la cli de la version la plus récente utilisation ng build --prod

    Il va créer dist dossier qui ont moins de fichiers et de la vitesse de projet sera augmenté.

    Aussi pour les tests en local avec les meilleures performances du moment cinétique de la cli vous pouvez utiliser ng serve --prod

    InformationsquelleAutor Jalay Oza
  10. 5

    si vous utilisez Angulaire de la CLI, vous pouvez toujours utiliser l'option --minimes drapeau lorsque vous créez un projet 

    ng new name --minimal

    Je viens de lancer avec le drapeau et il crée de 24 600 fichiers et ng build --prod produit 212 KB dist dossier

    Donc, si vous n'avez pas besoin de fontaines à eau dans votre projet ou tout simplement envie de tester rapidement de quelque chose je pense que c'est assez utile

    InformationsquelleAutor SebOlens
  11. 4

    Voici une comparaison de ce qui prend plus d'espace angulaire des projets.
    Très grand nombre de fichiers générés pour chaque Angulaire du projet

    InformationsquelleAutor Jagadesha NH
  12. 3

    Si votre système de fichiers prend en charge les liens symboliques, alors vous pouvez au moins reléguer tous ces fichiers dans un dossier caché-pour qu'un outil intelligent comme tree ne s'affiche pas par défaut.

    mv node_modules .blergyblerp && ln -s .blergyblerp node_modules

    À l'aide d'un dossier caché pour cela peut aussi encourager la compréhension que ce sont des construire des intermédiaires liés les fichiers qui n'ont pas besoin d'être enregistrés à la révision de contrôle-ou utilisé directement dans votre déploiement.

    InformationsquelleAutor nobar
  13. 2

    Il n'y a rien de mal. Ce sont toutes les dépendances node que vous avez mentionné dans le package.json.

    Juste être prudent si vous devez télécharger certains de git hub projet, il pourrait avoir beaucoup d'autres dépendances qui ne sont pas réellement besoin angulaire 2 premier hello world app 🙂

    • assurez-vous d'avoir angulaire dépendances
      -rxjs
      -gulp
      -tapuscrit
      -tslint
      -docker
    InformationsquelleAutor piyush anwekar