Javascript 为每个 Angular 项目生成的大量文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38718690/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Huge number of files generated for every Angular project
提问by Moshe Shaham
I wanted to start a simple hello world app for Angular.
我想为 Angular 启动一个简单的 hello world 应用程序。
When I followed the instructions in the official quickstartthe installation created 32,000 files in my project.
当我按照官方快速入门中的说明进行安装时，在我的项目中创建了 32,000 个文件。
I figured this is some mistake or I missed something, so I decided to use angular-cli, but after setting up the project I counted 41,000 files.
我认为这是一些错误或者我错过了一些东西，所以我决定使用angular-cli，但在设置项目后我计算了 41,000 个文件。
Where did I go wrong? Am I missing something really really obvious?
我哪里做错了？我错过了一些非常明显的东西吗？
采纳答案by Bhushan Gadekar
There is nothing wrong with your configuration.
您的配置没有任何问题。
Angular (since version 2.0) uses npm modules and dependencies for development. That's the sole reason you are seeing such a huge number of files.
Angular（从 2.0 版开始）使用 npm 模块和依赖项进行开发。这是您看到如此大量文件的唯一原因。
A basic setup of Angular contains transpiler, typings dependencies which are essentialfor development purposes only.
角的基本设置中包含transpiler，分型依赖它们是必不可少仅用于开发。
Once you are done with development, all you will need to do is to bundle this application.
完成开发后，您需要做的就是捆绑此应用程序。
After bundling your application, there will be only one bundle.jsfile which you can then deploy on your server.
捆绑您的应用程序后，将只有一个bundle.js文件可以部署到您的服务器上。
'transpiler'is just a compiler, thanks @omninonsense for adding that.
'transpiler'只是一个编译器，感谢 @omninonsense 添加它。
回答by Ankit Singh
Typical Angular2 Project
NPM Package Files (Development) Real World Files (Deployment)
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
*： bundled with @angular
回答by hurricane
There is nothing wrong with your developmentconfiguration.
您的开发配置没有任何问题。
Something wrong with your productionconfiguration.
您的生产配置有问题。
When you develop a "Angular 2 Project" or "Any Project Which is based on JS" you can use all files, you can try all files, you can import all files. But if you want to serve this project you need to COMBINEall structured files and get rid of useless files.
当您开发“Angular 2 项目”或“任何基于 JS 的项目”时，您可以使用所有文件，您可以尝试所有文件，您可以导入所有文件。但是如果你想为这个项目服务，你需要组合所有结构化文件并摆脱无用的文件。
There are a lot of options for combine these files together:
有很多选项可以将这些文件组合在一起：
- YUI Compressor
- Google Closure Compiler
- For server side (I think it is best) GULP
回答by swaechter
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.
正如一些人已经提到的： node_modules 目录（包的 NPM 位置）中的所有文件都是项目依赖项（所谓的直接依赖项）的一部分。除此之外，您的依赖项也可以有自己的依赖项等等（所谓的传递依赖项）。几万个文件没什么特别的。
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.
因为您只能上传 10'000 个文件（请参阅评论），所以我会使用打包引擎。该引擎将捆绑您所有的 JavaScript、CSS、HTML 等，并创建一个捆绑包（或更多，如果您指定它们）。您的 index.html 将加载这个包，就是这样。
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):
我是 webpack 的粉丝，所以我的 webpack 解决方案将创建一个应用程序包和一个供应商包（有关完整的工作应用程序，请参见此处https://github.com/swaechter/project-collection/tree/master/web-angular2-示例）：
index.html
索引.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
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
- 完整的构建线（TS linting、编译、缩小等）
- 3个文件部署 --> 只有几个Http请求
Disadvantages:
缺点：
- Higher build time
- Not the best solution for Http 2 projects (See disclaimer)
- 更长的构建时间
- 不是 Http 2 项目的最佳解决方案（请参阅免责声明）
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 1.* 的一个很好的解决方案，因为它最大限度地减少了每个 Http 请求的开销。您只有对 index.html 和每个包的请求 - 但不是 100 - 200 个文件。目前，这是要走的路。
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).
另一方面，Http 2 试图最小化 Http 开销，因此它基于流协议。该流能够双向通信（客户端 <--> 服务器），因此，可以进行更智能的资源加载（您只加载所需的文件）。该流消除了大部分 Http 开销（更少的 Http 往返）。
But it's the same as with IPv6: It will take a few years until people will really use Http 2
但它和 IPv6 一样：人们真正使用 Http 2 还需要几年时间
回答by Brocco
You need to ensure that you're just deploying the dist (short for distributable) folder from your project generated by the Angular CLI. This allows the tool to take your source code and it's dependencies and only give you what you need in order to run your application.
您需要确保您只是从Angular CLI生成的项目中部署 dist（distributable 的缩写）文件夹。这允许该工具获取您的源代码及其依赖项，并且只为您提供运行应用程序所需的内容。
That being said there is/was an issue with the Angular CLI in regards to production builds via `ng build --prod
话虽如此，在通过`ng build --prod 进行生产构建方面，Angular CLI 存在/存在问题
Yesterday (August 2, 2016) a release was done which switched the build mechanism from broccoli+ systemjsto webpackwhich successfully handles production builds.
昨日（2016年8月2日）释放已完成其切换的构建机制，从西兰花+ systemjs到的WebPack成功地处理产品构建。
Based upon these steps:
基于这些步骤：
ng new test-project
ng build --prod
I am seeing a distfolder size of 1.1 MBacross the 14 fileslisted here:
我看到此处列出的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
NoteCurrently to install the webpack version of the angular cli, you must run... npm install angular-cli@webpack -g
注意当前要安装 angular cli 的 webpack 版本，您必须运行...npm install angular-cli@webpack -g
回答by Yakov Fain
Angular itself has lots of dependencies, and the beta version of CLI downloads four times more files.
Angular 本身有很多依赖项，CLI 的测试版下载的文件多四倍。
This is how to create a simple project will less files ("only" 10K files) https://yakovfain.com/2016/05/06/starting-an-angular-2-rc-1-project/
这是如何创建一个简单的项目将更少的文件（“仅”10K 文件） https://yakovfain.com/2016/05/06/starting-an-angular-2-rc-1-project/
回答by Peter Salomonsen
Seems like nobody have mentioned Ahead-of-Time Compilation as described here: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html
似乎没有人提到这里描述的提前编译：https: //angular.io/docs/ts/latest/cookbook/aot-compiler.html
My experience with Angular so far is that AoT creates the smallest builds with almost no loading time. And most important as the question here is about - you only need to ship a few files to production.
到目前为止，我使用 Angular 的经验是 AoT 创建了最小的构建，几乎没有加载时间。最重要的是这里的问题是关于 - 您只需要将几个文件发送到生产中。
This seems to be because the Angular compiler will not be shipped with the production builds as the templates are compiled "Ahead of Time". It's also very cool to see your HTML template markup transformed to javascript instructions that would be very hard to reverse engineer into the original HTML.
这似乎是因为 Angular 编译器不会随生产版本一起提供，因为模板是“提前”编译的。看到您的 HTML 模板标记转换为 javascript 指令也非常酷，这些指令很难逆向工程成原始 HTML。
I've made a simple video where I demonstrate download size, number of files etc. for an Angular app in dev vs AoT build - which you can see here:
我制作了一个简单的视频，在其中演示了 dev vs AoT 构建中的 Angular 应用程序的下载大小、文件数量等 - 您可以在这里看到：
You'll find the source code for the demo here:
您可以在此处找到演示的源代码：
https://github.com/fintechneo/angular2-templates
https://github.com/fintechneo/angular2-templates
And - as all the others said here - there's nothing wrong when there are many files in your development environment. That's how it is with all the dependencies that comes with Angular, and many other modern frameworks. But the difference here is that when shipping to production you should be able to pack it into a few files. Also you don't want all of these dependency files in your git repository.
而且 - 正如所有其他人在这里所说的 - 当您的开发环境中有很多文件时，没有任何问题。这就是 Angular 和许多其他现代框架附带的所有依赖项的情况。但这里的区别在于，在交付到生产环境时，您应该能够将其打包成几个文件。此外，您不希望 git 存储库中的所有这些依赖文件。
回答by Jalay Oza
If you are using angular cli's newer version use ng build --prod
如果您使用的是 angular cli 的较新版本，请使用 ng build --prod
It will create distfolder which have less files and speed of project will increased.
它将创建文件较少的dist文件夹，项目速度将提高。
Also for testing in local with best performance of angular cli you can use ng serve --prod
也可以使用 angular cli 的最佳性能在本地进行测试 ng serve --prod
回答by Angular University
This is actually not Angular specific, it happens with almost any project that uses the NodeJs / npm ecosystem for its tooling.
这实际上并不是 Angular 特有的，几乎所有使用 NodeJs / npm 生态系统作为其工具的项目都会发生这种情况。
Those project are inside your node_modules folders, and are the transititve dependencies that your direct dependencies need to run.
这些项目位于您的 node_modules 文件夹中，并且是您的直接依赖项需要运行的传递依赖项。
In the node ecosystem modules are usually small, meaning that instead of developing things ourselves we tend to import most of what we need under the form of a module. This can include such small things like the famous left-pad function, why write it ourselves if not as an exercise ?
在节点生态系统中，模块通常很小，这意味着我们倾向于以模块的形式导入大部分我们需要的东西，而不是自己开发东西。这可以包括像著名的左键盘功能这样的小东西，如果不是作为练习，为什么要自己写呢？
So having a lot of files its actually a good thing, it means everything is very modular and module authors frequently reused other modules. This ease of modularity is probably one of the main reasons why the node ecosystem grew so fast.
所以拥有大量文件实际上是一件好事，这意味着一切都非常模块化，模块作者经常重用其他模块。这种模块化的易用性可能是节点生态系统增长如此之快的主要原因之一。
In principle this should not cause any issue, but it seems you run into a google app engine file count limit. In that I case I suggest to not upload node_modules to app engine.
原则上这不会导致任何问题，但您似乎遇到了 Google 应用引擎文件计数限制。在这种情况下，我建议不要将 node_modules 上传到应用程序引擎。
instead build the application locally and upload to google app engine only the bundled filesn but don't to the build in app engine itself.
而是在本地构建应用程序并仅将捆绑的文件上传到谷歌应用引擎，但不要上传到应用引擎本身的构建。
回答by SebOlens
if you use Angular CLI you can always use --minimal flag when you create a project
如果您使用 Angular CLI，您可以在创建项目时始终使用 --minimal 标志
ng new name --minimal
I've just run it with the flag and it creates 24 600 files and ng build --prodproduces 212 KB dist folder
我刚刚使用标志运行它，它创建了 24 600 个文件并ng build --prod生成了 212 KB dist 文件夹
So if you don't need water fountains in your project or just want to quickly test something out this I think is pretty useful
因此，如果您的项目中不需要喷泉，或者只是想快速测试一些东西，我认为这非常有用
