I have always heard that you should have all of your JS and CSS in as few of files as possible when the site is live. The reason is because it helps improve your loading times as there are less http request.
So my question is this: Is this accurate?
In other words More HTTP Request but smaller individual files?
OR
One large file fewer http request?
This assume that the total file size is the same. Which is a better option?
In my view, we should develop web pages as easy as possible - with as many small files included as it suites to us. But when we go to production, we should use 1) minimizing and 2) bundling.
These techniques not only improves performance because less data (still enough for browser) is transferred. But mostly because of:
I.e. only few files are needed to download. Check this my bundle example:
<!-- all stuff loaded as a bundle of three resources -->
<script src="/project/angular?v=NveddIF51HI4iaxPpUsI0S6c3he4gNp66Up41Sv2fKK5"></script>
<script src="/project/project?v=d9PZoP5TedID06vwo3Yf-m6fBwo1TZw06O9ggW7pSwa9"></script>
<script src="/project/states?v=nquC98Yj1sR51ao9uywcJ3nzq7v07c7k1jzEi4UzMvsq"></script>
Which in comparison without bundling was containing hundreds of small references, small scripts
And that is the biggest benefit, to have few files - browsers do not have to do so many requests, which do have limit to being executed in parallel