Como várias pessoas já mencionaram: Todos os arquivos no diretório node_modules (local do NPM para pacotes) fazem parte das dependências do seu projeto (chamadas dependências diretas). Além disso, suas dependências também podem ter suas próprias dependências, etc. (chamadas dependências transitivas). Vários dez mil arquivos não são nada de especiais.
Como você só pode carregar 10.000 arquivos (ver comentários), eu usaria um mecanismo de empacotador. Esse mecanismo agrupará todo o seu JavaScript, CSS, HTML etc. e criará um único bundle (ou mais, se você os especificar). Seu index.html carregará esse pacote e é isso.
Como sou fã do webpack, minha solução criará um pacote de aplicativos e um pacote de fornecedores (para o aplicativo de trabalho completo, veja aqui https://github.com/swaechter/project-collection/tree/master/web-angular2- exemplo ):
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));
}
Vantagens:
- Linha de construção completa (TS linting, compilação, minificação, etc.)
- 3 arquivos para implantação -> Apenas algumas solicitações Http
Desvantagens:
- Maior tempo de construção
- Não é a melhor solução para projetos Http 2 (consulte o aviso)
Aviso Legal: Esta é uma boa solução para o Http 1. *, porque minimiza a sobrecarga de cada solicitação de Http. Você só tem uma solicitação para o seu index.html e cada pacote configurável - mas não para 100 - 200 arquivos. No momento, este é o caminho a percorrer.
O HTTP 2, por outro lado, tenta minimizar a sobrecarga do HTTP, por isso é baseado em um protocolo de fluxo. Esse fluxo é capaz de se comunicar nas duas direções (Cliente <--> Servidor) e, por isso, é possível um carregamento de recursos mais inteligente (você carrega apenas os arquivos necessários). O fluxo elimina grande parte da sobrecarga Http (menos viagens de ida e volta Http).
Mas é o mesmo que com o IPv6: levará alguns anos até que as pessoas realmente usem o Http 2