angularjs - 我应该在 AngularJS Web 应用程序中将所有 .js 文件合并为一个吗？

Question

我正在构建一个WebApp，整个项目基于AngularJS和 PHP (作为后端)，我在最后一部分，给它最后的润色、测试等。我怀疑是否建议连接我所有的 .js文件合而为一。我问这个是因为我使用了很多我自己编写的代码，以及第三方库，例如表单掩码、对话框、 Angular Material 等。
我有 2 个页面结构，一个 dist最终缩小的文件夹 .js文件和 src文件夹，我一切都安然无恙。

src                                     dist
├── app                                 ├── js
│   ├── .app-ctrl.js                    │   ├── .app.min.js
│   ├── .app-dire.js                    │   ├── .angular.min.js
│   └── .app-fact.js                    │   └── .angular-animate.min.js
│   └── .app-main.js                    │   └── .angular-material.min.js
└── js                                  │   └── .[...etc...].min.js
│    ├── .angular.min.js                └── lib
│    ├── .angular-animate.min.js            ├── .ngDialog.min.js
│    └── .angular-material.min.js           ├── .ngMask.min.js
│    └── .[...etc...].min.js                └── .[...etc...].min.js
└── lib
    ├── .ngDialog.min.js
    ├── .ngMask.min.js
    └── .[...etc...].min.js

然后在我的 html我正在加载这些文件中的每一个，如下所示:

<!-- Main Scripts -->
<script src="dist/js/app.min.js"></script>
<script src="dist/js/angular.min.js"></script>
<script src="dist/js/angular-router.min.js"></script>
[..etc..]

<!-- Lib Scripts -->
<script src="dist/lib/ngMask.min.js"></script>
<script src="dist/lib/ngDialog.min.js"></script>
<script src="dist/lib/ngNotification.min.js"></script>
[...etc...]

我最大的疑问是所有这些文件的连接。
是否建议这样做？
我应该连接哪些文件？因为我知道 angular 是一个大库，不应该与其他库连接(至少我不会这样做)。但还有其他的，较小的。
由于我是 AngularJs 的新用户(以及在 javascript 中，仅基于我从 Angular 中学到的知识)这样做有什么好处？它会带来更好的性能吗？我的代码更安全？
我应该怎么做才能使这些事情变得更好？
这些是我想知道的重要问题，以便更好地开发我的应用程序以及更好的 acabamento 代码。

编辑
我正在阅读有关此内容的更多信息，并且还找到了 obfuscate 的选项。代码，除了使代码更安全。我什至发现了这个 npm plugin grunt-obfuscator ，但它不工作。据我所知，它不适用于 AngularJS .还有另一种方法吗？混淆代码或使其更安全？

Answer 1

除非您想使用 CDN，否则如果您只有一个应用程序，当然建议您使用 concat。如果没有应用程序脚本，Angular 依赖项将毫无用处，反之亦然。它们是核心库、第三方库还是您自己的代码都没有关系。

主要关注的是加载速度(一个大的 js 文件会下载得更快)。在这种情况下，您不需要做任何进一步的操作，只需按照加载 js 文件的顺序即可。使用 Grunt 进行操作, Gulp或 any other tool .

如果有几组可能加载的 js 文件，并且一些应用程序部分依赖于其他部分，但不是全部，事情就会变得不同。在这种情况下，应该有几个连接的文件。手动连接在这里效率低下，但模块捆绑器通过捆绑/ block 来实现。 Browserify , RequireJS , JSPM和 Webpack都有能力做到这一点。