Question Un grand nombre de fichiers générés pour chaque projet Angular


Je voulais lancer une application simple hello world pour Angular.

Quand j'ai suivi les instructions de la version officielle démarrage rapide l'installation a créé 32 000 fichiers dans mon projet.

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

Où est-ce que je me suis trompé? Est-ce que je manque quelque chose de vraiment évident?


490
2017-08-02 11:04


origine


Réponses:


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

Angular (depuis la version 2.0) utilise des modules npm et des dépendances pour le développement. C'est la seule raison pour laquelle vous voyez un si grand nombre de fichiers.

Une configuration de base d'Angular contient transpiler, les dépendances de typage qui sont essentiel à des fins de développement seulement.

Une fois que vous avez terminé le développement, tout ce que vous devrez faire est de regrouper cette application.

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

'transpiler' est juste un compilateur, merci @omninonsense pour l'avoir ajouté.


298
2017-08-02 11:26



                                Typical Angular2 Project

Paquet NPM Fichiers (Développement) Fichiers du monde réel (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 ceci pour le processus de groupage & neArr ]


123
2017-08-03 05:33



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

Quelque chose ne va pas avec votre production configuration.

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

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


47
2017-08-02 13:42



Comme plusieurs personnes l'ont déjà mentionné: Tous les fichiers de votre répertoire node_modules (emplacement NPM pour les packages) font partie de vos dépendances de projet (ce que l'on appelle les dépendances directes). En plus de cela, vos dépendances peuvent aussi avoir leurs propres dépendances, etc. (dépendances transitives). Plusieurs dizaines de milliers de fichiers n'ont rien de spécial.

Parce que vous n'êtes autorisé à télécharger 10'000 fichiers (voir les commentaires), je voudrais aller avec un moteur bundler. Ce moteur regroupera tous vos codes JavaScript, CSS, HTML, etc. et créera un seul ensemble (ou plus si vous les spécifiez). Votre index.html va charger ce paquet et c'est tout.

Je suis un fan de webpack, donc ma solution webpack va créer un ensemble d'applications et un bundle fournisseur (Pour l'application complète, 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:

  • Ligne de construction complète (linting TS, compilation, minification, etc.)
  • 3 fichiers pour le déploiement -> Seulement quelques requêtes Http

Désavantages:

  • Temps de construction plus élevé
  • Pas la meilleure solution pour les projets Http 2 (voir avertissement)

Avertissement: C'est une bonne solution pour Http 1. *, car elle minimise la surcharge pour chaque requête Http. Vous avez seulement une demande pour votre index.html et chaque paquet - mais pas pour 100 - 200 fichiers. Pour l'instant, c'est la voie à suivre.

D'autre part, Http 2 essaie de minimiser la surcharge Http, donc il est basé sur un protocole de flux. Ce flux est capable de communiquer dans les deux sens (Client <-> Serveur) et en raison de ce que le chargement de ressources plus intelligent est possible (vous ne chargez que les fichiers requis). Le flux élimine une grande partie de l'overhead Http (moins d'allers-retours Http).

Mais c'est la même chose qu'avec IPv6: il faudra quelques années avant que les gens utilisent vraiment Http 2


26
2017-08-02 19:01



Vous devez vous assurer que vous ne faites que déployer le dossier dist (short for distributable) de votre projet généré par le CLI angulaire. Cela permet à l'outil de prendre votre code source et ses dépendances et de ne vous donner que ce dont vous avez besoin pour exécuter votre application.

Cela étant dit, il y avait / était un problème avec la CLI angulaire en ce qui concerne les versions de production via `ng build --prod

Hier (2 août 2016) une version a été faite qui a changé le mécanisme de construction de brocoli + systemjs à webpack qui gère avec succès les builds de production.

Basé sur ces étapes:

ng new test-project
ng build --prod

Je vois un dist taille du dossier 1,1 Mo à travers 14 fichiers énuméré 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

Remarque Actuellement, pour installer la version Webpack du cli angulaire, vous devez lancer ... npm install angular-cli@webpack -g


20
2017-08-03 13:35



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

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


12
2017-08-02 15:20



On dirait que personne n'a mentionné la compilation Ahead-of-Time comme décrit ici: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

Mon expérience avec Angular jusqu'à présent est que AoT crée les plus petites constructions avec presque aucun temps de chargement. Et plus important encore, la question se pose: il suffit d'envoyer quelques fichiers en production.

Cela semble être dû au fait que le compilateur Angular ne sera pas livré avec les versions de production car les modèles sont compilés "Ahead of Time". Il est également très intéressant de voir le balisage de votre modèle HTML transformé en instructions javascript qui seraient très difficiles à décomposer dans le code HTML d'origine.

J'ai réalisé une vidéo simple où je montre la taille de téléchargement, le nombre de fichiers, etc. pour une application Angular dans dev vs AoT build - 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 l'ont dit ici - il n'y a rien de mal quand il y a beaucoup de fichiers dans votre environnement de développement. C'est comme ça avec toutes les dépendances qu'offre Angular, et beaucoup d'autres frameworks modernes. Mais la différence est que lorsque vous expédiez en production, vous devriez pouvoir l’emballer dans quelques fichiers. De plus, vous ne voulez pas tous ces fichiers de dépendance dans votre dépôt git.


8
2018-01-13 19:33