Fatal编程技术网
  • javascript/
  • Javascript 为每个角度项目生成大量文件

Javascript 为每个角度项目生成大量文件

javascript angular

Javascript 为每个角度项目生成大量文件,javascript,angular,Javascript,Angular,我想为Angular启动一个简单的hello world应用程序 当我按照官方文件中的说明进行安装时，在我的项目中创建了32000个文件 我认为这是一个错误，或者我错过了一些东西，所以我决定使用，但在设置项目后，我统计了41000个文件 我哪里出错了？我错过了一些非常明显的东西吗？您的配置没有问题 Angular（自版本2.0起）使用npm模块和依赖项进行开发。这是你看到如此大量文件的唯一原因 Angular的基本设置包含transpiler和打字依赖项，这些依赖项仅用于开发目的 一旦您完成了开

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

当我按照官方文件中的说明进行安装时，在我的项目中创建了32000个文件

我认为这是一个错误，或者我错过了一些东西，所以我决定使用，但在设置项目后，我统计了41000个文件

我哪里出错了？我错过了一些非常明显的东西吗？

您的配置没有问题

Angular（自版本2.0起）使用npm模块和依赖项进行开发。这是你看到如此大量文件的唯一原因

Angular的基本设置包含transpiler和打字依赖项，这些依赖项仅用于开发目的

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

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

“transpiler”只是一个编译器，感谢@OmniJustion添加它。

您的配置没有问题

Angular（自版本2.0起）使用npm模块和依赖项进行开发。这是你看到如此大量文件的唯一原因

Angular的基本设置包含transpiler和打字依赖项，这些依赖项仅用于开发目的

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

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

“transpiler”只是一个编译器，感谢@OmniJustion添加它。

您的开发配置没有问题

您的生产配置出现问题

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

将这些文件组合在一起有很多选项：

  • 对于服务器端（我认为这是最好的）
      • 您的开发配置没有问题

      您的生产配置出现问题

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

      将这些文件组合在一起有很多选项：

      • 对于服务器端（我认为这是最好的）
      Angular本身有很多依赖项，而CLI的beta版下载的文件要多出四倍

      这是如何创建一个简单的项目将减少文件（“仅”10K文件）

      Angular本身有很多依赖项，而CLI的beta版下载的文件要多出四倍

      这是如何创建一个简单的项目将减少文件（“仅”10K文件）

      正如一些人已经提到的：节点模块目录（包的NPM位置）中的所有文件都是项目依赖项（所谓的直接依赖项）的一部分。除此之外，您的依赖项还可以有自己的依赖项等等（所谓的传递依赖项）。数万个文件没什么特别的

      因为你只允许上传10000个文件（见评论），所以我会选择捆绑机引擎。该引擎将绑定所有JavaScript、CSS、HTML等，并创建一个单独的绑定（如果您指定，可以创建更多）。您的index.html将加载此捆绑包，仅此而已

      我是webpack的粉丝，因此我的webpack解决方案将创建一个应用程序包和一个供应商包（有关完整的工作应用程序，请参见此处）：

      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>
      优点：

      • 完整构建行（TS精简、编译、缩小等）
      • 3个用于部署的文件-->只有几个Http请求
      缺点：

      • 更高的构建时间
      • 不是Http 2项目的最佳解决方案（请参阅免责声明）
      免责声明：这是Http 1*的一个很好的解决方案，因为它将每个Http请求的开销降至最低。您只有一个对index.html和每个bundle的请求，但不是对100-200个文件的请求。目前，这是一条路要走

      另一方面，Http 2试图最小化Http开销，因此它基于流协议。该流能够在两个方向（客户机-服务器）进行通信，因此，可以更智能地加载资源（您只加载所需的文件）。流消除了大量Http开销（减少了Http往返）

      但与IPv6相同：人们真正使用Http 2需要几年时间，正如一些人已经提到的那样：节点模块目录（包的NPM位置）中的所有文件都是项目依赖项的一部分（所谓的直接依赖项）。除此之外，您的依赖项还可以有自己的依赖项等等（所谓的传递依赖项）。数万个文件没什么特别的

                                      Typical Angular2 Project
      因为你只允许上传10000个文件（见评论），所以我会选择捆绑机引擎。该引擎将绑定所有JavaScript、CSS、HTML等，并创建一个单独的绑定（如果您指定，可以创建更多）。您的index.html将加载此捆绑包，仅此而已

      我是webpack的粉丝，因此我的webpack解决方案将创建一个应用程序包和一个供应商包（有关完整的工作应用程序，请参见此处）：

      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>
      优势 
      @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  

      ng new test-project
ng build --prod

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

      ng new name --minimal

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

      ng new name --minimal