我想为Angular创建一个简单的“Hello World”应用程序。
当我按照官方快速入门中的说明进行操作时,安装程序在我的项目中创建了32,000个文件。
我认为这是某种错误或者我错过了什么,所以我决定使用angular-cli,但在设置完项目后,我数了一下有41,000个文件。
我到底做错了什么?我是不是漏掉了非常明显的东西?
我想为Angular创建一个简单的“Hello World”应用程序。
当我按照官方快速入门中的说明进行操作时,安装程序在我的项目中创建了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
-3
是因为没有做这道题目而被扣分,但是现在我已经做了 :) - Ankit Singh你的开发配置没有问题。
你的生产配置有问题。
当你开发一个 "Angular 2 项目" 或 "任何基于 JS 的项目" 时,你可以使用所有文件,你可以尝试所有文件,你可以导入所有文件。但如果你想要提供此项目,你需要合并所有结构化文件并且摆脱无用的文件。
有很多选项可以将这些文件合并在一起:
正如几位已经提到的人所说:您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));
}
优点:
缺点:
免责声明:这是Http 1.*的一个好的解决方案,因为它最小化了每个Http请求的开销。您只需要一个请求来获取您的index.html和每个捆绑包 - 而不是100-200个文件。目前,这是正确的方法。
另一方面,Http 2试图将Http开销最小化,因此它基于流协议。该流能够在两个方向(客户端<-->服务器)进行通信,并因此可以进行更智能的资源加载(您只加载所需的文件)。流消除了许多Http开销(减少Http往返)。
但这就像IPv6一样:人们真正使用Http 2还需要几年时间。
angular-cli
,它已经带有一个打包工具(与建议的webpack相同)。 - mattarau您需要确保只部署由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本身有很多依赖项,而beta版的CLI会下载四倍于此的文件。
以下是创建具有较少文件(“仅”10K文件)的简单项目的方法: https://yakovfain.com/2016/05/06/starting-an-angular-2-rc-1-project/
实际上,这并不是Angular特有的问题,几乎任何使用NodeJs / npm生态系统进行工具开发的项目都会遇到这种情况。
这些项目位于您的node_modules文件夹中,是直接依赖项需要运行的传递依赖项。
在Node生态系统中,模块通常很小,这意味着我们倾向于以模块的形式导入大部分所需内容,包括诸如著名的left-pad函数之类的小东西。如果不是为了练习,我们为什么要自己编写它们呢?
因此,拥有大量文件实际上是一件好事,这意味着一切都非常模块化,模块作者经常重复使用其他模块。这种易于模块化可能是Node生态系统快速增长的主要原因之一。
原则上,这不应该引起任何问题,但似乎您遇到了Google App Engine文件计数限制。在这种情况下,我建议不要将node_modules上传到App Engine。
相反,本地构建应用程序,并仅将捆绑文件上传到Google App Engine,而不要在App Engine本身执行构建。
如果您正在使用angular cli的新版本,请使用ng build --prod
这将创建一个dist文件夹,其中包含较少的文件,并且项目的速度会增加。
此外,为了在本地进行最佳性能测试,您可以使用ng serve --prod