Should I execute wll my .js files into one in AngularJS WebApp?

Question

I am creating WebApp, the whole project is based on AngularJS and PHP (as a backend), I am in the final part, giving it the final touches, tests, etc. I have doubts about whether it is recommended that all of my .js files be rolled into one. I ask about this because I use a lot of code that I wrote myself, as well as libraries of the third part, such as form masks, dialogs, angular stuff, etc.

I have 2 page structures, the dist folder for the final .js mini files and the src folder, where everything is fine with me.

 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 

Then, in my html file, I upload each of these files, for example:

 <!-- 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...] 

My biggest doubt concerns the concatenation of all these files.

Can this be done?
What files should I concatenate? Because I know that angular is a large library and should not be concatenated with others (at least I would not do that). But there are others, smaller ones.

Since I am a new user in AngularJS (and also in javascript, only based on what I learned from Angular ), what would be the benefits of this? Will there be better performance? Improved security of my code?

What should I do to improve these things?
These are important questions that I would like to know in order to improve the development, as well as improve the acabamento code of my application.

---

Edit

I read more about this, and I also found an option for obfuscate code, and also make the code more secure. I even found this npm grunt-obfuscator plugin , but it does not work. As far as I know, it does not work with AngularJS . Is there any other way to do this? To confuse the code or make it more secure?

Answer 1

If you do not want to use CDN, it is definitely recommended that you run it if you have one application. Angular dependencies would be useless without application scripts and vice versa. It doesn't matter if they are core libraries, third-party libraries or your own code.

The main problem is the download speed (one large js file will load faster). In this case, you do not need to go further than just concatenation, just follow the order of loading js files. Do this with Grunt , Gulp, or any other tool .

Everything becomes different if there are several sets, possibly downloaded js files, and some parts of the applications depend on some others, but not all. In this case, there must be several concatenated files. Manual concatenation is inefficient here, but modular ligaments through bundles / pieces. Browserify , RequireJS , JSPM, and Webpack are capable of this.