正如一些人已经提到的：node_modules 目录（包的 NPM 位置）中的所有文件都是项目依赖项（所谓的直接依赖项）的一部分。除此之外，您的依赖项还可以有自己的依赖项等等（所谓的传递依赖项）。几万个文件没什么特别的。
因为您只能上传 10'000 个文件（请参阅 cmets），所以我会使用捆绑程序引擎。该引擎将捆绑您所有的 JavaScript、CSS、HTML 等，并创建一个捆绑包（如果您指定它们，则可以创建更多包）。你的 index.html 将加载这个包，就是这样。
我是 webpack 的粉丝，所以我的 webpack 解决方案将创建一个应用程序包和一个供应商包（有关完整的工作应用程序，请参见此处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));
}
优点：
- 完整的构建线（TS linting、编译、缩小等）
- 3个部署文件-->只有几个Http请求
缺点：
- 构建时间更长
- 不是 Http 2 项目的最佳解决方案（请参阅免责声明）
免责声明：这是 Http 1.* 的一个很好的解决方案，因为它最大限度地减少了每个 Http 请求的开销。您只有对 index.html 和每个捆绑包的请求 - 而不是 100 - 200 个文件。目前，这是要走的路。
另一方面，Http 2 试图最小化 Http 开销，因此它基于流协议。此流能够双向通信（客户端 服务器），因此，可以进行更智能的资源加载（您只加载所需的文件）。流消除了大部分 Http 开销（更少的 Http 往返）。
但这与 IPv6 相同：人们真正使用 Http 2 还需要几年时间