我应该将我的.js文件连接到AngularJS WebApp中的文件吗？

Question

我正在构建一个WebApp,整个项目基于AngularJS和PHP(作为后端),我在最后一部分,给它最后的接触,测试等等.我怀疑是否建议连接把我的所有.js文件合而为一.我问这个是因为我使用了很多代码,我自己编写的代码,以及第三方库,例如表单掩码,对话框,角度材料等.

我有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...]

我最大的疑问是关于所有这些文件的连续性.

建议这样做吗？
我应该连接哪些文件？因为我知道棱角是一个大的图书馆,不应该与其他人连接(至少我不会这样做).但还有其他的,较小的.

由于我是新用户AngularJs(以及javascript,只是基于我从中学到的东西Angular)这样做有什么好处？是否会提供更好的表现？更好的代码安全性？

我该怎么做才能让这些事情变得更好？
这些是我想知道的重要问题,以便更好地开发,也是我的应用程序的更好的acabamento代码.

---

编辑

我正在阅读更多关于此obfuscate的内容,除了使代码更安全之外,我还找到了代码的选项.我甚至找到了这个npm插件grunt-obfuscator,但它没有用.据我所知,它不起作用AngularJS.还有另一种方法吗？混淆代码或使代码更安全？

Answer 1

除非你想使用CDN，如果你只有一个应用程序，那么当然建议使用concat。如果没有应用程序脚本，角度依赖关系将毫无用处，反之亦然。它们是核心库、第三方库还是您自己的代码并不重要。

主要关心的是加载速度（一个大的js文件下载速度会更快）。在这种情况下，除了简单的串联之外，您不需要做任何进一步的操作，只需遵循 js 文件的加载顺序即可。使用Grunt、Gulp或任何其他工具来完成此操作。

如果有几组可能加载的 js 文件，并且某些应用程序部分依赖于其他部分（但不是全部），情况就会有所不同。在这种情况下，应该有多个串联文件。手动串联在这里效率低下，但模块捆绑器通过捆绑/块进行串联。Browserify、RequireJS、JSPM和Webpack都能够做到这一点。