Riesige Anzahl von Dateien, die für jedes Angular-Projekt generiert wurden

594

Ich wollte eine einfache Hallo-Welt-App für Angular starten.

Als ich den Anweisungen im offiziellen Schnellstart folgte, erstellte die Installation 32.000 Dateien in meinem Projekt.

Ich dachte, dies sei ein Fehler oder ich habe etwas verpasst, also entschied ich mich für Angular-Cli , aber nach dem Einrichten des Projekts zählte ich 41.000 Dateien.

Was habe ich falsch gemacht? Vermisse ich etwas wirklich wirklich Offensichtliches?

javascript angular Moshe Shaham
quelle
98
Es ist normal für Projekte, die mit NPM betrieben werden.
Everettss
115
@ Hendrix, weil meine Bereitstellung (Google App Engine) nur 10K-Dateien erlaubt
Moshe Shaham
49
Für alle, die neugierig auf die Anzahl der Stimmen zu dieser Frage und ihre Antworten sind, wurde die HN-Titelseite erstellt. news.ycombinator.com/item?id=12209028
ceejayoz
50
@hendrix - Ich wette, Sie übergeben .DS_Store-Dateien auch an git.
Martin Konecny
61
Ich denke, "Wenn Ihre Hallo-Welt-App funktioniert, ist alles in Ordnung" ist keine gute Philosophie, besonders für jemanden, der lernt. Das OP ist genau richtig zu fragen, warum so viele Dateien erstellt wurden. Das Beispiel selbst verweist nur auf 5 Dateien. Und ehrlich gesagt sollte jede Anwendung, deren Ausgabe mehr Dateien als Buchstaben enthält, in Frage gestellt werden.
Shawn

Antworten:

362

An Ihrer Konfiguration ist nichts auszusetzen.

Angular (seit Version 2.0) verwendet npm-Module und Abhängigkeiten für die Entwicklung. Das ist der einzige Grund, warum Sie so viele Dateien sehen.

Eine Grundeinstellung von Angular enthält Transpiler-Typisierungsabhängigkeiten, die nur für Entwicklungszwecke wesentlich sind .

Sobald Sie mit der Entwicklung fertig sind, müssen Sie nur noch diese Anwendung bündeln.

Nach dem Bündeln Ihrer Anwendung gibt es nur eine bundle.jsDatei, die Sie dann auf Ihrem Server bereitstellen können.

'transpiler' ist nur ein Compiler, danke @omninonsense für das Hinzufügen.

Bhushan Gadekar
quelle
7
In der Regel werden auch die Testdaten und Test- und Build-Tools für die Abhängigkeiten und ihre Abhängigkeiten usw. bereitgestellt.
Benjamin Gruenbaum
63
Ein "Transpiler" ist nur ein Compiler.
Omninonsense
32
aber kompiliert in eine andere Sprache anstatt in Bytecode oder Maschinencode
Hunter McMillen
32
@ HunterMcMillen Bytecode und / oder Maschinencode ist eine andere Sprache. Der Begriff "Transpiler" hat keine zusätzliche Bedeutung als "Compiler".
Brandon Buck
76
In Bezug auf alle Beteiligten bin ich mir nicht sicher, ob das semantische Argument wirklich relevant für OPs Frage ist ^^
Dan Pantry
144 
                                Typical Angular2 Project

NPM-Paketdateien                        (Entwicklung)                   Dateien aus der realen Welt (Bereitstellung) 

@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

[ Informationen zum Bündelungsprozess finden Sie hier ⇗ ]

Ankit Singh
quelle
24
Ich denke -3, wir wurden dafür gegeben, dass wir die Summe nicht gemacht haben, aber jetzt habe ich :)
Ankit Singh
1
Was meinst du mit Dateien aus der realen Welt?
Yeahman
1
@yeahman "Dateien aus der realen Welt" ist die Anzahl der Dateien, wenn Ihr Projekt bereitgestellt oder in Produktion ist .
Maarti
Auch die Größe zählt, nur 3 Dateien, aber sie können riesig sein (für Web)
pdem
51

An Ihrer Entwicklungskonfiguration ist nichts auszusetzen .

Mit Ihrer Produktionskonfiguration stimmt etwas nicht .

Wenn Sie ein "Angular 2-Projekt" oder "Jedes auf JS basierende Projekt" entwickeln, können Sie alle Dateien verwenden, Sie können alle Dateien ausprobieren, Sie können alle Dateien importieren. Wenn Sie dieses Projekt jedoch bedienen möchten, müssen Sie alle strukturierten Dateien KOMBINIEREN und nutzlose Dateien entfernen .

Es gibt viele Möglichkeiten, diese Dateien miteinander zu kombinieren:

Hurrikan
quelle
2
Sie sollten nicht (Zitieren erforderlich) Dateien auf dem Server miteinander verketten. Ich würde höchstens einen Transpiler verwenden.
Dan Pantry
1
@ DanPantry-Transpiler sind Source-to-Source-Compiler. Ich denke, sie können nur "X" in "JS" ändern. Die Anzahl der Dateien ist gleich.
Hurrikan
1
..Ja, aber ich bin mir nicht sicher, was Sie meinen. Mein Punkt ist, dass Sie wahrscheinlich nicht versuchen sollten, den Servercode zu minimieren (indem Sie Dateien verketten und damit die Dateigröße reduzieren). Sie sollten höchstens Babel für Ihren Code verwenden, wenn Sie Blutungsfunktionen wie async / await verwenden.
Dan Pantry
2
@ DanPantry Ich stimme dir zu. In den Kommentaren sagt der Fragesteller jedoch "weil meine Bereitstellung (Google App Engine) nur 10.000 Dateien zulässt". Unter diesen Bedingungen müssen wir die Anzahl der Dateien minimieren.
Hurrikan
4
Ich würde Ihnen zustimmen, aber OP scheint hier ein XY-Problem zu haben
Dan Pantry
30

Wie bereits von mehreren Personen erwähnt: Alle Dateien in Ihrem Verzeichnis node_modules (NPM-Speicherort für Pakete) sind Teil Ihrer Projektabhängigkeiten (sogenannte direkte Abhängigkeiten). Darüber hinaus können Ihre Abhängigkeiten auch eigene Abhängigkeiten usw. haben (sogenannte transitive Abhängigkeiten). Mehrere zehntausend Dateien sind nichts Besonderes.

Da Sie nur 10'000 Dateien hochladen dürfen (siehe Kommentare), würde ich mich für eine Bundler-Engine entscheiden. Diese Engine bündelt Ihr gesamtes JavaScript, CSS, HTML usw. und erstellt ein einzelnes Bundle (oder mehr, wenn Sie diese angeben). Ihre index.html lädt dieses Bundle und das wars.

Ich bin ein Fan von Webpack, daher erstellt meine Webpack-Lösung ein Anwendungspaket und ein Anbieterpaket (Die voll funktionsfähige Anwendung finden Sie hier https://github.com/swaechter/project-collection/tree/master/web-angular2- Beispiel ):

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));
}

Vorteile:

  • Vollständige Build-Linie (TS-Flusen, Kompilieren, Minimieren usw.)
  • 3 Dateien für die Bereitstellung -> Nur wenige HTTP-Anforderungen

Nachteile:

  • Höhere Bauzeit
  • Nicht die beste Lösung für HTTP 2-Projekte (siehe Haftungsausschluss)

Haftungsausschluss: Dies ist eine gute Lösung für HTTP 1. *, da dadurch der Overhead für jede HTTP-Anforderung minimiert wird. Sie haben nur eine Anfrage für Ihre index.html und jedes Bundle - nicht jedoch für 100 - 200 Dateien. Im Moment ist dies der richtige Weg.

Http 2 hingegen versucht, den Http-Overhead zu minimieren, sodass es auf einem Stream-Protokoll basiert. Dieser Stream kann in beide Richtungen kommunizieren (Client <-> Server). Aus diesem Grund ist ein intelligenteres Laden von Ressourcen möglich (Sie laden nur die erforderlichen Dateien). Der Stream eliminiert einen Großteil des HTTP-Overheads (weniger HTTP-Roundtrips).

Aber es ist das gleiche wie bei IPv6: Es wird einige Jahre dauern, bis die Leute wirklich HTTP 2 verwenden

swaechter
quelle
1
Nicht erforderlich, da das erwähnte OP angular-clibereits einen Bundler enthält (das gleiche empfohlene Webpack).
Mattarau
2
@mdentinho Ja, in moderneren Releases. Aber im Jahr 2016 war SystemJS und CLI der richtige Weg (wir haben jetzt gerne ein Webpack)
swaechter
21

Sie müssen sicherstellen, dass Sie nur den Ordner dist (kurz für verteilbar) aus Ihrem Projekt bereitstellen, der von der Angular CLI generiert wurde . Auf diese Weise kann das Tool Ihren Quellcode und seine Abhängigkeiten übernehmen und Ihnen nur das geben, was Sie zum Ausführen Ihrer Anwendung benötigen.

Davon abgesehen gibt / gab es ein Problem mit der Angular CLI in Bezug auf Produktions-Builds über `ng build --prod

Gestern (2. August 2016) wurde eine Version veröffentlicht, die den Build-Mechanismus von Broccoli + Systemjs auf Webpack umstellte, das Produktions-Builds erfolgreich verarbeitet.

Basierend auf diesen Schritten:

ng new test-project
ng build --prod

Ich sehe eine distOrdnergröße von 1,1 MB in den 14 hier aufgeführten Dateien :

./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

Hinweis Um die Webpack-Version des Angular Cli zu installieren, müssen Sie derzeit ...npm install angular-cli@webpack -g

Brocco
quelle
12

Es scheint, als hätte niemand die Ahead-of-Time-Kompilierung wie hier beschrieben erwähnt: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

Meine bisherige Erfahrung mit Angular ist, dass AoT die kleinsten Builds fast ohne Ladezeit erstellt. Und das Wichtigste bei der Frage hier ist, dass Sie nur wenige Dateien an die Produktion senden müssen.

Dies scheint darauf zurückzuführen zu sein, dass der Angular-Compiler nicht mit den Produktions-Builds ausgeliefert wird, da die Vorlagen "Ahead of Time" kompiliert werden. Es ist auch sehr cool zu sehen, wie Ihr HTML-Vorlagen-Markup in Javascript-Anweisungen umgewandelt wird, die sich nur sehr schwer in das ursprüngliche HTML zurückentwickeln lassen.

Ich habe ein einfaches Video erstellt, in dem ich die Downloadgröße, die Anzahl der Dateien usw. für eine Angular-App in dev vs AoT Build demonstriere - was Sie hier sehen können:

https://youtu.be/ZoZDCgQwnmQ

Den Quellcode für die Demo finden Sie hier:

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

Und - wie alle anderen hier sagten - es ist nichts falsch, wenn sich viele Dateien in Ihrer Entwicklungsumgebung befinden. So ist es mit all den Abhängigkeiten, die mit Angular und vielen anderen modernen Frameworks einhergehen. Der Unterschied besteht jedoch darin, dass Sie beim Versand in die Produktion in der Lage sein sollten, diese in einige Dateien zu packen. Außerdem möchten Sie nicht alle diese Abhängigkeitsdateien in Ihrem Git-Repository haben.

Peter Salomonsen
quelle
8

Dies ist eigentlich nicht Angular-spezifisch, es passiert bei fast jedem Projekt, das das NodeJs / npm-Ökosystem für seine Werkzeuge verwendet.

Diese Projekte befinden sich in den Ordnern node_modules und sind die Transitabhängigkeiten, die Ihre direkten Abhängigkeiten ausführen müssen.

In den Knoten sind Ökosystemmodule normalerweise klein, was bedeutet, dass wir, anstatt Dinge selbst zu entwickeln, das meiste, was wir brauchen, in Form eines Moduls importieren. Dies kann so kleine Dinge wie die berühmte Funktion des linken Pads beinhalten. Warum sollte man sie selbst schreiben, wenn nicht als Übung?

Viele Dateien zu haben, ist eigentlich eine gute Sache. Das bedeutet, dass alles sehr modular aufgebaut ist und Modulautoren häufig andere Module wiederverwenden. Diese einfache Modularität ist wahrscheinlich einer der Hauptgründe, warum das Knotenökosystem so schnell gewachsen ist.

Im Prinzip sollte dies kein Problem verursachen, aber es scheint, dass Sie auf ein Limit für die Anzahl der Dateien der Google App Engine stoßen. In diesem Fall schlage ich vor, node_modules nicht in die App Engine hochzuladen.

Erstellen Sie die Anwendung stattdessen lokal und laden Sie nur die gebündelten Dateien in die Google App Engine hoch, nicht jedoch in die integrierte App Engine.

Angular University
quelle
8

Wenn Sie die neuere Version von Angular CLI verwenden, verwenden Sie ng build --prod

Es wird ein dist- Ordner erstellt, der weniger Dateien enthält, und die Projektgeschwindigkeit wird erhöht.

Auch zum Testen vor Ort mit der besten Leistung von Winkel-Cli können Sie verwenden ng serve --prod

Jalay Oza
quelle
6

Wenn Sie Angular CLI verwenden, können Sie beim Erstellen eines Projekts immer das Flag --minimal verwenden 

ng new name --minimal

Ich habe es gerade mit dem Flag ausgeführt und es erstellt 24 600 Dateien und ng build --proderzeugt 212 KB dist Ordner

Wenn Sie also in Ihrem Projekt keine Wasserfontänen benötigen oder einfach nur schnell etwas ausprobieren möchten, halte ich dies für ziemlich nützlich

SebOlens
quelle
5

Das Erstellen eines neuen Projekts mit Angular Cli vor kurzem und dem Ordner node_modules war 270 MB groß. Ja, das ist normal, aber ich bin sicher, dass die meisten neuen Entwickler in der Angular World dies in Frage stellen und gültig sind. Für ein einfaches neues Projekt wäre es sinnvoll, die Abhängigkeiten vielleicht ein wenig zu reduzieren;) Nicht zu wissen, wovon alle Pakete abhängen, kann etwas nervig sein, insbesondere für neue Entwickler, die das Cli zum ersten Mal ausprobieren. Hinzu kommt, dass in den meisten grundlegenden Lernprogrammen die Bereitstellungseinstellungen nicht erläutert werden, um nur die exportierten Dateien zu erhalten, die benötigt werden. Ich glaube nicht, dass selbst das auf der eckigen offiziellen Website angebotene Tutorial darüber spricht, wie das einfache Projekt bereitgestellt werden kann.

Es sieht so aus, als ob der Ordner node_modules der Schuldige ist

maguy
quelle
4

Hier ist ein Vergleich dessen, was in Winkelprojekten mehr Platz benötigt. Geben Sie hier die Bildbeschreibung ein

Jagadesha NH
quelle
3

Wenn Ihr Dateisystem symbolische Links unterstützt, können Sie zumindest alle diese Dateien in einen versteckten Ordner verschieben, sodass treesie von einem intelligenten Tool nicht standardmäßig angezeigt werden.

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

Die Verwendung eines versteckten Ordners hierfür kann auch das Verständnis fördern, dass es sich um Build-bezogene Zwischendateien handelt, die nicht zur Revisionskontrolle gespeichert oder direkt in Ihrer Bereitstellung verwendet werden müssen.

kein Balken
quelle
Mein Brotkrumen ist abgestanden, aber hier ist, worauf es sich bezieht: web.archive.org/web/20150216184318/https://docs.npmjs.com/misc/…
nobar
2

Da ist nichts falsch. Dies sind alle Knotenabhängigkeiten, die Sie in package.json erwähnt haben.

Seien Sie vorsichtig, wenn Sie einen Teil des Git Hub-Projekts heruntergeladen haben. Möglicherweise gibt es viele andere Abhängigkeiten, die für die Angular 2 First Hello World-App nicht erforderlich sind :)

  • Stellen Sie sicher, dass Sie Winkelabhängigkeiten haben -rxjs -gulp -typescript -tslint -docker
Piyush Anwekar
quelle