为每个Angular项目生成大量的文件
我想为Angular创build一个简单的Hello World应用程序。
当我按照官方快速入门中的说明安装时，在我的项目中创build了32,000个文件。
我想这是一些错误，或者我错过了一些东西，所以我决定使用angular-cli ，但是在build立这个项目之后，我计算了41,000个文件。
我哪里做错了？ 我错过了真正明显的东西吗？
你的configuration没有任何问题。
Angular（从2.0版开始）使用npm模块和依赖关系进行开发。 这是你看到这么多文件的唯一原因。
Angular的一个基本设置包含译码器，types依赖关系，这对于开发目的来说是必不可less的。
一旦你完成了开发，你将需要做的就是绑定这个应用程序。
捆绑你的应用程序后，将只有一个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
[ 看到这个捆绑过程＆neArr; ]
你的开发configuration没有任何问题。
你的生产configuration有问题。
当你开发一个“Angular 2 Project”或“基于JS的任何项目”时，你可以使用所有的文件，你可以尝试所有的文件，你可以导入所有的文件。 但是如果你想为这个项目服务，你需要结合所有的结构化文件，摆脱无用的文件。
有很多选项可以将这些文件组合在一起：
- YUI压缩机
- Google Closure编译器
- 对于服务器端（我认为这是最好的） GULP
正如已经提到的几个人一样：node_modules目录中的所有文件（软件包的NPM位置）都是项目依赖关系（称为直接依赖关系）的一部分。 除此之外，你的依赖关系也可以有自己的依赖关系等等（所谓的传递依赖关系）。 几万个文件没有什么特别的。
因为你只能上传10,000个文件（见评论），所以我会使用捆绑引擎。 这个引擎将捆绑所有的JavaScript，CSS，HTML等，并创build一个包（或更多，如果你指定它们）。 你的index.html将加载这个包，就是这样。
我是webpack的粉丝，所以我的webpack解决scheme将创build一个应用程序包和一个供应商捆绑（有关完整的工作应用程序，请参阅https://github.com/swaechter/project-collection/tree/master/web-angular2-例如; ）：
的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林林，编译，缩小等）
- 3个文件进行部署 – >只有几个Http请求
缺点：
- 更高的构build时间
- 不是Http 2项目的最佳解决scheme（请参阅免责声明）
免责声明：这是一个很好的解决scheme，因为它最大限度地减less了每个Http请求的开销。 你只有一个索引你的index.html和每个包 – 而不是100 – 200个文件。 目前，这是要走的路。
另一方面，Http 2试图最小化Http开销，因此它基于stream协议。 这个stream能够在两个方向上进行通信（客户端< – >服务器），并且作为一个更加智能的资源加载可能的原因（您只加载所需的文件）。 stream消除了大部分的Http开销（减lessHttp往返）。
但是它和IPv6一样：人们真正使用Http2需要几年的时间
您需要确保您只是从Angular CLI生成的项目中部署dist（可分发的简短文件夹）文件夹。 这使得该工具可以把你的源代码和它的依赖关系，只给你你需要的东西来运行你的应用程序。
这就是说，在Angular CLI中，通过`ng build –prod来生产生成是有问题的
昨天（2016年8月2日）发布了一个版本，该版本从broccoli + systemjs切换到成功处理生产版本的webpack 。
基于以下步骤：
ng new test-project ng build --prod
我在这里列出的14个文件中看到一个1.1 MB的dist文件夹大小：
./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的testing版下载了四倍以上的文件。
这是如何创build一个简单的项目将less文件（“只”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创build最小的版本，几乎没有加载时间。 而最重要的是，这里的问题是关于 – 你只需要运送一些文件到生产。
这似乎是因为Angular编译器不会随着模板被编译为“时间前面”而与生产版本一起发货。 将HTML模板标记转换为javascript指令也很酷，这些指令很难将其反向工程化为原始HTML。
我已经做了一个简单的video，我展示了下载文件的大小，文件数量等一个Angular应用程序在开发VS AOT构build – 你可以看到这里：
你可以在这里find演示的源代码：
https://github.com/fintechneo/angular2-templates
而且正如所有其他人在这里所说的那样，在开发环境中有很多文件的时候没有什么问题。 这就是Angular和其他许多现代框架的所有依赖关系。 但是这里的区别在于，在运送到生产环境时，您应该能够将其打包成几个文件。 你也不需要你的git仓库中的所有这些依赖文件。
这实际上并不是Angular特有的，几乎所有使用NodeJs / npm生态系统进行工具化的项目都会发生这种情况。
这些项目在你的node_modules文件夹中，是你的直接依赖需要运行的transititve依赖。
在节点生态系统中，模块通常很小，这意味着我们不是自己开发事物，而是以模块的forms导入大部分需要的东西。 这可以包括像着名的左键function这样的小东西，如果不是作为练习，为什么自己写呢？
因此，拥有大量文件实际上是一件好事，这意味着一切都是非常模块化的，模块作者经常重复使用其他模块。 这种模块化的方便可能是节点生态系统如此快速增长的主要原因之一。
原则上这不应该引起任何问题，但似乎你遇到一个谷歌应用程序引擎文件数量限制。 在这种情况下，我build议不要将node_modules上传到应用程序引擎。
而是在本地构build应用程序，然后上传到Google应用程序引擎而不是附带的文件，但不要在应用程序引擎本身中构build。
如果你是使用angular度cli新版本使用ng build –prod我将创builddist文件夹，其中有较less的文件和项目的spped将增加
也为了在本地testingangular度cli的最佳性能，你可以使用ng serve –prod
没有任何错误。 这些都是你在package.json中提到的所有节点依赖关系。
只要小心，如果你已经下载了一些git hub项目，它可能有很多其他的依赖，实际上并不需要angular2首先hello世界的应用程序:)
- 确保你有angular度依赖-rxjs -gulp -typescript -tslint -docker
以下是angular度项目需要更多空间的比较。 
你会在node_modules中看到大量的文件/文件夹，它们都是在模块，服务，组件中导入的包。对于生产只是使用ng build – 生成文件夹dist包含捆绑的CSS，js文件和html.Use用于生产它小于MB。
