Je voulais commencer un simple hello world app Angulaire.
Lorsque j'ai suivi les instructions dans la langue officielle de démarrage rapide de l'installation créée 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 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 installation de base Angulaire contient transpiler, typings dépendances qui sont essentielles à 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 le fichier que vous pouvez ensuite déployer sur votre serveur.
'transpiler' est juste un compilateur, merci @omninonsense pour l'ajout.
Typical Angular2 Project
Package NPM (Fichiers de Développement) du 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
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:
Comme 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 toute demande, voir ici https://github.com/swaechter/project-collection/tree/master/web-angular2-example):
index.html
<!DOCTYPE html>
<html>
<head>
<base href="http://stackoverflow.com/">
<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:
Inconvénients:
Avertissement: Ce 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
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 l' 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 le dossier de la taille de 1.1 MO à travers les 14 fichiers listé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
Remarque Actuellement pour installer le webpack version de l'angle de la cli, vous devez exécuter... npm install angular-cli@webpack -g
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
