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

Question

I'm building a WebApp, the whole project is based on AngularJS and PHP (as backend), I'm in the final part, giving it the final touches, tests, etc. I have a doubt in whether or not it is recommended to concat all my .js files into one. I'm asking this because i'm using a lot of code, that i wrote by self, as well as third part libraries, such as form masks, dialogs, angular material, etc..

I have 2 pages structures, a dist folder for the final minified .js files, and a src folder where i have everything in peaces.

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'm loading each of these files, like so:

<!-- 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 is about the concat of all of these files.

Is it recomended to do it?
Which files should i concat? Because i know angular is a big library, and shouldn't be concat with other ones (at least i wouldn't do it). But there are other ones, smaller ones.

Since I'm a new user in AngularJs (as well as in javascript, just based on what i've learned from Angular) what would be the benefits of doing so? Is it going to give a better performance? Better security of my code?

What should i do to make those things better?
These are important questions i'd like to know to make a better development and also a better acabamento code of my app.

---

Edit

I was reading more about this and i also found the option to obfuscate the code, in addition to make the code safer. I even found this npm plugin grunt-obfuscator, but it's not working. As far as i know, it doesn't work with AngularJS. Is there another way to do it? To obfuscate the code or make it safer?

Answer 1

Unless you want to make use of CDN, It is certainly recommended to concat if you have a single app. Angular dependencies would be useless without app scripts, and vice versa. It doesn't matter if they are core libraries, third-party libraries or your own code.

The main concern is loading speed (one big js file will be downloaded faster). You don't need to go any further than mere concatenation in this case, just follow the order in which js files are loaded. Do it with Grunt, Gulp or any other tool.

The things become different if there are several sets of possibly loaded js files, and some of app parts depend on some other, but not all. In this case there should be several concatenated files. Manual concatenation is inefficient here, but module bundlers are, via bundles/chunks. Browserify, RequireJS, JSPM and Webpack are all capable of that.