为每个 Angular 项目生成大量文件
我想为 Angular 启动一个简单的 hello world 应用程序。
当我按照官方 quickstart 中的说明进行安装时，我的项目中创建了 32,000 个文件。
我认为这是一个错误或者我遗漏了一些东西，所以我决定使用 angular-cli，但在设置项目后，我统计了 41,000 个文件。
我哪里做错了？我错过了一些非常明显的东西吗？
你的配置没有问题。
Angular（从 2.0 版开始）使用 npm 模块和依赖项进行开发。这是您看到如此大量文件的唯一原因。
Angular 的基本设置包含转译器、类型依赖项，这些依赖项仅用于开发目的。
完成开发后，您需要做的就是捆绑此应用程序。
捆绑您的应用程序后，将只有一个 bundle.js 文件，然后您可以将其部署在您的服务器上。
'transpiler' 只是一个编译器，感谢@omninonsense 添加它。
Typical Angular2 Project
NPM 包文件（开发）真实世界文件（部署）
@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
[see this for bundling process ⇗]
-3 是因为没有做总和，但现在我有:)
您的开发配置没有问题。
您的生产配置有问题。
当您开发“Angular 2 项目”或“任何基于 JS 的项目”时，您可以使用所有文件，可以尝试所有文件，可以导入所有文件。但是如果你想为这个项目服务，你需要组合所有的结构化文件并摆脱无用的文件。
有很多选项可以将这些文件组合在一起：
YUI 压缩机
谷歌闭包编译器
对于服务器端（我认为这是最好的）GULP
正如一些人已经提到的： node_modules 目录（包的 NPM 位置）中的所有文件都是项目依赖项（所谓的直接依赖项）的一部分。除此之外，您的依赖项还可以有自己的依赖项等等（所谓的传递依赖项）。几万个文件没什么特别的。
因为您只能上传 10'000 个文件（请参阅评论），所以我会使用捆绑引擎。该引擎将捆绑您所有的 JavaScript、CSS、HTML 等并创建一个捆绑包（如果您指定它们，则可以创建更多包）。您的 index.html 将加载此捆绑包，仅此而已。
我是 webpack 的粉丝，所以我的 webpack 解决方案将创建一个应用程序包和一个供应商包（有关完整的工作应用程序，请参见此处 https://github.com/swaechter/project-collection/tree/master/web-angular2-example）：
索引.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 还需要几年时间
angular-cli 已经带有捆绑器（相同的建议 webpack）。
您需要确保您只是从 Angular CLI 生成的项目中部署 dist（distributable 的缩写）文件夹。这允许该工具获取您的源代码及其依赖项，并且只为您提供运行应用程序所需的内容。
话虽如此，Angular CLI 在通过 `ng build --prod 进行生产构建方面存在/存在问题
昨天（2016 年 8 月 2 日）发布了一个版本，将构建机制从 broccoli + systemjs 切换为 webpack，从而成功处理了生产构建。
基于这些步骤：
ng new test-project
ng build --prod
我在此处列出的 14 个文件 中看到 dist 文件夹大小为 1.1 MB：
./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
注意 目前要安装 angular cli 的 webpack 版本，您必须运行... npm install angular-cli@webpack -g
最近使用 angular cli 创建了一个新项目，node_modules 文件夹为 270 mb，所以是的，这是正常的，但我敢肯定，大多数新开发人员对 angular 世界提出质疑，并且是有效的。对于一个简单的新项目，减少依赖关系可能是有意义的；）不知道所有包依赖什么可能会有点令人不安，特别是对于第一次尝试 cli 的新开发人员来说。添加到大多数基本教程不讨论部署设置以获取仅需要的导出文件这一事实。我不相信即使是 Angular 官方网站上提供的教程都在谈论如何部署简单的项目。
https://i.stack.imgur.com/Leawm.jpg
Angular 本身有很多依赖项，而 CLI 的 beta 版本下载的文件要多四倍。
这是如何创建一个简单的项目将减少文件（“仅”10K 个文件）https://yakovfain.com/2016/05/06/starting-an-angular-2-rc-1-project/
似乎没有人提到这里描述的提前编译：https://angular.io/docs/ts/latest/cookbook/aot-compiler.html
到目前为止，我对 Angular 的体验是，AoT 创建最小的构建，几乎没有加载时间。最重要的是这里的问题 - 您只需要将几个文件发送到生产环境。
这似乎是因为 Angular 编译器不会随生产版本一起提供，因为模板是“提前”编译的。看到您的 HTML 模板标记转换为很难逆向工程为原始 HTML 的 javascript 指令也非常酷。
我制作了一个简单的视频，在其中演示了开发与 AoT 构建中 Angular 应用程序的下载大小、文件数量等 - 你可以在这里看到：
您可以在此处找到演示的源代码：
https://github.com/fintechneo/angular2-templates
而且 - 正如所有其他人所说的那样 - 当您的开发环境中有很多文件时，没有任何问题。这就是 Angular 和许多其他现代框架附带的所有依赖项的情况。但这里的不同之处在于，在运送到生产环境时，您应该能够将其打包成几个文件。此外，您不希望 git 存储库中的所有这些依赖文件。
这实际上不是 Angular 特定的，几乎所有使用 NodeJs / npm 生态系统作为工具的项目都会发生这种情况。
这些项目位于您的 node_modules 文件夹中，并且是您的直接依赖项需要运行的传递依赖项。
在节点生态系统中，模块通常很小，这意味着我们倾向于以模块的形式导入大部分我们需要的东西，而不是自己开发东西。这可以包括像著名的左垫功能这样的小东西，如果不是作为练习，为什么要自己写呢？
所以拥有大量文件实际上是一件好事，这意味着一切都是非常模块化的，模块作者经常重用其他模块。这种模块化的便利性可能是节点生态系统增长如此之快的主要原因之一。
原则上这不会引起任何问题，但您似乎遇到了谷歌应用引擎文件计数限制。在这种情况下，我建议不要将 node_modules 上传到应用引擎。
而是在本地构建应用程序并仅将捆绑的文件上传到谷歌应用引擎，但不要上传到应用引擎本身的构建。
如果您使用 angular cli 的较新版本，请使用 ng build --prod
它将创建文件较少的 dist 文件夹，并且项目的速度将提高。
此外，为了在本地进行角 cli 性能最佳的测试，您可以使用 ng serve --prod
如果您使用 Angular CLI，您可以在创建项目时始终使用 --minimal 标志
ng new name --minimal
我刚刚使用标志运行它，它创建了 24 600 个文件，ng build --prod 生成了 212 KB 的 dist 文件夹
因此，如果您的项目中不需要喷泉，或者只是想快速测试一些东西，我认为这非常有用
如果您的文件系统支持符号链接，那么您至少可以将所有这些文件放到一个隐藏文件夹中——这样像 tree 这样的智能工具就不会默认显示它们。
mv node_modules .blergyblerp && ln -s .blergyblerp node_modules
为此使用隐藏文件夹也可能会鼓励理解这些是与构建相关的中间文件，不需要保存到修订控制 - 或直接在您的部署中使用。
没有任何错误。这些都是您在 package.json 中提到的所有节点依赖项。
如果您下载了一些 git hub 项目，请小心，它可能有很多其他依赖项，这些依赖项实际上并不需要 angular 2 first hello world app :)
确保你有角度依赖 -rxjs -gulp -typescript -tslint -docker
您的开发配置没有问题。
如果您使用 Angular CLI，您可以在创建项目时始终使用 --minimal 标志
ng new name --minimal
