每个Angular项目生成大量文件

JavaScript

前端猪猪GO

2020-03-12

我想为Angular启动一个简单的hello world应用程序。

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

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

我哪里做错了?我是否错过了确实很明显的东西?

第900篇《每个Angular项目生成大量文件》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

11个回答
凯Gil 2020.03.12

您的开发配置没有错

您的生产配置有问题。

当您开发“ Angular 2项目”或“基于JS的任何项目”时,您可以使用所有文件,可以尝试所有文件,也可以导入所有文件。但是,如果您想为该项目提供服务,则需要合并所有结构化文件并清除无用的文件。

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

GO西门 2020.03.12

最近使用angular cli创建一个新项目,并且node_modules文件夹为270 mb,所以是的,这是正常的,但是我敢肯定,这个对角世界的大多数新开发人员都对此表示怀疑并且是有效的。对于一个简单的新项目,可能需要减少一些依赖;)不知道所有程序包所依赖的内容可能会有些不安,特别是对于那些初次尝试使用cli的新开发人员而言。事实是,大多数基础教程都没有讨论仅需要获取导出文件的部署设置。我什至不相信甚至有角官方网站上提供的教程也不会谈论如何部署简单项目。

看起来是node_modules文件夹是罪魁祸首

蛋蛋L西里 2020.03.12

没有任何错误。这些都是您在package.json中提到的所有节点依赖项。

请注意,如果您下载了一些git hub项目,它可能还有很多其他依赖,而Angular 2 first hello world应用实际上并不需要这些依赖:)

  • 确保您具有角度依赖性-rxjs -gulp -typescript -tslint -docker
老丝村村 2020.03.12

这是在角度项目中占用更多空间的比较。 在此处输入图片说明

卡卡西凯 2020.03.12

如果您正在使用angular cli的较新版本,请使用 ng build --prod

它将创建一个dist文件夹,该文件夹具有较少的文件,并且项目速度会提高。

也可以在本地使用最佳角度cli性能进行测试 ng serve --prod

凯西里 2020.03.12

如果使用Angular CLI,则在创建项目时始终可以使用--minimal标志

ng new name --minimal

我刚刚用标志运行它,它创建了24 600个文件并ng build --prod生成212 KB dist文件夹

因此,如果您在项目中不需要喷泉,或者只是想快速测试一下,我认为这很有用

古一古一 2020.03.12

如果您的文件系统支持符号链接,那么您至少可以将所有这些文件释放到一个隐藏的文件夹中-这样,tree默认情况下,像这样的智能工具就不会显示它们。

mv node_modules .blergyblerp && ln -s .blergyblerp node_modules

为此使用隐藏文件夹也可能会促使您理解这些是与构建相关的中间文件,不需要保存到版本控制中或直接在部署中使用。

Tom老丝 2020.03.12

这实际上不是特定于Angular的,它几乎发生在所有使用NodeJs / npm生态系统作为其工具的项目中。

这些项目位于node_modules文件夹内,并且是直接依赖项需要运行的transititve依赖项。

在节点中,生态系统模块通常很小,这意味着我们不自行开发东西,而是倾向于以模块的形式导入大部分所需信息。这可能包括诸如著名的左键盘功能之类的小东西,如果不作为练习,为什么还要自己编写呢?

因此拥有大量文件实际上是一件好事,这意味着一切都非常模块化,模块作者经常重用其他模块。这种模块化的简便性可能是节点生态系统如此快速增长的主要原因之一。

原则上,这应该不会造成任何问题,但似乎您遇到了Google App Engine文件数限制。在这种情况下,我建议不要将node_modules上传到应用引擎。

而是在本地构建应用程序,然后仅将捆绑的文件上传到google app引擎,而不上传到内置的app引擎本身。

猿十三 2020.03.12

Angular本身具有很多依赖性,Beta版的CLI下载的文件多四倍。

这是一个创建简单项目的方法,该文件将减少文件(“仅” 10K文件) https://yakovfain.com/2016/05/06/starting-an-angular-2-rc-1-project/

逆天TomHarry 2020.03.12

您需要确保仅从Angular CLI生成的项目中部署dist(可分发的缩写)文件夹这使该工具可以获取源代码及其依赖项,并且仅提供运行应用程序所需的内容。

话虽这么说,Angular CLI在通过ng build --prod进行生产构建方面存在问题

昨日(2016年8月2日)释放已完成其切换的构建机制,从西兰花 + systemjs的WebPack成功地处理产品构建。

基于以下步骤:

ng new test-project
ng build --prod

我在这里列出14个文件中看到1.1 MBdist文件夹大小

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

注意当前要安装角度cli的webpack版本,必须运行...npm install angular-cli@webpack -g

GIZO-俊宏 2020.03.12
                                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

[ 有关捆绑过程,请参阅此内容⇗ ]

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android