为每个Angular项目生成大量的文件

我想为Angular创建一个简单的hello world应用。

当我按照官方的快速入门中的说明进行安装时，在我的项目中创建了32,000个文件。

我认为这是一个错误或我错过了一些东西，所以我决定使用angular-cli，但在设置项目后，我数了41,000个文件。

我哪里错了?我是不是忽略了一些非常非常明显的东西?

63355 次浏览
小开
最佳答案

您的配置没有问题。

Angular(从2.0版开始)使用npm模块和依赖项进行开发。这就是你看到这么多文件的唯一原因。

Angular的基本设置包括编译器和类型依赖项，仅用于开发目的，这些依赖项是至关重要的。

一旦您完成了开发，您所需要做的就是捆绑这个应用程序。

在捆绑应用程序之后，只有一个bundle.js文件可以部署到服务器上。

< em >“transpiler”只是一个编译器，感谢@omninonsense添加它

小开

发展配置没有问题。

生产配置有问题。

当你开发一个“Angular 2项目”或“任何基于JS的项目”时，你可以使用所有文件，可以尝试所有文件，可以导入所有文件。但如果你想服务于这个项目，你需要结合所有结构化文件，并摆脱无用的文件。

有很多选项可以将这些文件合并在一起:

小开

Angular本身有很多依赖项，而CLI的beta版本下载的文件是其他版本的四倍。

这是如何创建一个简单的项目将更少的文件(“只有”10K文件) # EYZ0 < / p >
小开

正如一些人已经提到的:你的node_modules目录下的所有文件(包的NPM位置)都是你的项目依赖关系(所谓的直接依赖关系)的一部分。除此之外，你的依赖也可以有它们自己的依赖等等(所谓的传递依赖)。几万个文件没什么特别的。

因为你只允许上传10,000个文件(见评论)，我会使用捆绑引擎。这个引擎将捆绑你所有的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检测、编译、缩小等)
  • 只有几个Http请求

缺点:

  • 更长的构建时间
  • 不是Http 2项目的最佳解决方案(见免责声明)

这是Http 1的一个很好的解决方案。*，因为它最小化了每个Http请求的开销。你只对index.html和每个包有一个请求-但不是100 - 200个文件。目前，这是一条正确的道路。

另一方面，Http 2试图最小化Http开销，因此它基于流协议。这个流能够双向通信(客户端<——>服务器)，因此，更智能的资源加载是可能的(你只加载所需的文件)。流消除了大量的Http开销(更少的Http往返)。

但这和IPv6一样:人们真正使用Http 2还需要几年的时间

小开 
                                Typical Angular2 Project

# EYZ0 ,,,,,,,,,,,,,,,,,,,,,# EYZ1,,,,,,,,,,,,,,,,,, # EYZ2

@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

# EYZ0: # EYZ2

[# eyz0]

小开

您需要确保您只是从角CLI生成的项目中部署dist (distributable的缩写)文件夹。这允许该工具获取您的源代码及其依赖项，并只提供运行应用程序所需的内容。

也就是说，Angular CLI在通过' ng build——prod进行产品构建时存在/曾经存在一个问题

昨天(2016年8月2日)发布了一个版本，将构建机制从西兰花 + systemjs切换到webpack，成功地处理了生产构建。

基于这些步骤:

ng new test-project
ng build --prod

我看到一个dist文件夹大小的1.1 MB在14个文件列出在这里:

./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

目前要安装webpack版本的angular cli，你必须运行…# EYZ0

小开

这实际上并不是Angular特有的，几乎所有使用NodeJs / npm生态系统作为工具的项目都会发生这种情况。

这些项目在你的node_modules文件夹中，是你的直接依赖需要运行的传递依赖。

在节点生态系统中，模块通常很小，这意味着我们不需要自己开发东西，而是倾向于以模块的形式导入大部分我们需要的东西。这可以包括像著名的左垫函数这样的小东西，如果不是作为练习，为什么我们自己写呢?

所以有很多文件实际上是一件好事，这意味着一切都是模块化的，模块作者经常重用其他模块。这种模块化的便利性可能是节点生态系统发展如此迅速的主要原因之一。

原则上这应该不会引起任何问题，但似乎你遇到了谷歌应用程序引擎文件计数限制。在这种情况下，我建议不要上传node_modules到应用程序引擎。

相反，在本地构建应用程序，并上传到谷歌应用程序引擎只捆绑文件，但不构建在应用程序引擎本身。

小开

没什么问题。这些都是您在package.json中提到的所有节点依赖项。

如果你已经下载了一些git hub项目，请小心，它可能有很多其他的依赖关系，而这些依赖关系实际上并不是angular 2 first hello world app所需要的:)

  • 确保你有角度依赖 -rxjs 狼吞虎咽地吃 打印稿 -tslint 码头工人李< / >
小开

似乎没有人提到这里描述的预先编译:https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

到目前为止，我使用Angular的经验是，AoT创建了最小的构建，几乎没有加载时间。最重要的是，您只需要将几个文件交付到生产环境中。

这似乎是因为Angular编译器不会随产品版本一起发布，因为模板是“提前”编译的。看到你的HTML模板标记转换成javascript指令也很酷，这将很难反向工程到原始HTML。

我做了一个简单的视频，演示了Angular应用在开发阶段和AoT构建阶段的下载大小、文件数量等——你可以在这里看到:

< a href = " https://youtu。是/ ZoZDCgQwnmQ noreferrer“rel = > https://youtu.be/ZoZDCgQwnmQ < / >

你可以在这里找到演示的源代码:

https://github.com/fintechneo/angular2-templates

而且——正如这里所有其他人所说的那样——当开发环境中有许多文件时，这并没有什么问题。这就是Angular和许多其他现代框架所附带的所有依赖项的情况。但不同之处在于，当交付到生产环境时，您应该能够将其打包到几个文件中。你也不希望所有这些依赖文件都在你的git存储库中。

小开

如果你使用的是angular cli的新版本，请使用ng build --prod

它将创建经销文件夹，其中有更少的文件和项目的速度将提高。

此外，为了在本地测试angular 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

为此使用隐藏文件夹还可以鼓励这样的理解，即这些是与构建相关的中间文件，不需要保存到修订控制中——或者直接在部署中使用。

小开

最近用angular cli创建了一个新项目，node_modules文件夹是270mb，所以是的，这很正常，但我相信大多数新加入angular的开发者都会质疑这一点，这是有效的。对于一个简单的新项目来说，减少一些依赖关系是有意义的;)不知道所有的包依赖于什么会让人有点紧张，尤其是对第一次尝试cli的新开发人员来说。此外，大多数基本教程不会讨论部署设置，以获得只需要的导出文件。我不相信angular官方网站上的教程会讲到如何部署这个简单的项目。

看来node_modules文件夹是罪魁祸首

小开

您的开发配置没有问题。

如果你使用Angular CLI，你可以在创建项目时使用——minimal标志

ng new name --minimal

提交答案