Comme plusieurs personnes l'ont déjà mentionné: Tous les fichiers de votre répertoire node_modules (emplacement NPM pour les packages) font partie des dépendances de votre projet (soi-disant dépendances directes). En plus de cela, vos dépendances peuvent également avoir leurs propres dépendances et ainsi de suite, etc. (soi-disant dépendances transitives). Plusieurs dizaines de milliers de fichiers n'ont rien de spécial.
Parce que vous n'êtes autorisé à télécharger que 10'000 fichiers (voir commentaires), j'irais avec un moteur de bundler. Ce moteur regroupera tous vos JavaScript, CSS, HTML, etc. et créera un seul bundle (ou plus si vous les spécifiez). Votre index.html chargera ce bundle et c'est tout.
Je suis un fan de webpack, donc ma solution de webpack créera un bundle d'applications et un bundle de fournisseur (pour l'application complète, voir ici https://github.com/swaechter/project-collection/tree/master/web-angular2- exemple ):
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 build complète (TS linting, compilation, minification, etc.)
- 3 fichiers à déployer -> Seulement quelques requêtes Http
Désavantages:
- Temps de construction plus long
- Pas la meilleure solution pour les projets Http 2 (voir l'avertissement)
Avertissement: il s'agit d'une bonne solution pour Http 1. *, car elle minimise les frais généraux pour chaque demande Http. Vous avez seulement une demande pour votre index.html et chaque bundle - mais pas pour 100 à 200 fichiers. Pour le moment, c'est la voie à suivre.
Http 2, d'autre part, essaie de minimiser la surcharge Http, il est donc basé sur un protocole de flux. Ce flux est capable de communiquer dans les deux sens (Client <--> Serveur) et pour cette raison, un chargement de ressources plus intelligent est possible (Vous ne chargez que les fichiers requis). Le flux élimine une grande partie de la surcharge Http (moins d'allers-retours Http).
Mais c'est la même chose qu'avec IPv6: il faudra quelques années pour que les gens utilisent vraiment Http 2