As several people already mentioned: All files in your node_modules directory (NPM location for packages) are part of your project dependencies (So-called direct dependencies). As an addition to that, your dependencies can also have their own dependencies and so on, etc. (So-called transitive dependencies). Several ten thousand files are nothing special.

Because you are only allowed to upload 10'000 files (See comments), I would go with a bundler engine. This engine will bundle all your JavaScript, CSS, HTML, etc. and create a single bundle (or more if you specify them). Your index.html will load this bundle and that's it.

I am a fan of webpack, so my webpack solution will create an application bundle and a vendor bundle (For the full working application see here 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)); }

Advantages:

Full build line (TS linting, compiling, minification, etc.)

3 files for deployment --> Only a few Http requests

Disadvantages:

Higher build time

Not the best solution for Http 2 projects (See disclaimer)

Disclaimer: This is a good solution for Http 1.*, because it minimizes the overhead for each Http request. You only have a request for your index.html and each bundle - but not for 100 - 200 files. At the moment, this is the way to go.

Http 2, on the other hand, tries to minimize the Http overhead, so it's based on a stream protocol. This stream is able to communicate in both direction (Client <--> Server) and as a reason of that, a more intelligent resource loading is possible (You only load the required files). The stream eliminates much of the Http overhead (Less Http round trips).

But it's the same as with IPv6: It will take a few years until people will really use Http 2