Will this mean the file won't get cached by browsers because it's too
That depends on the browser. Desktop browsers shouldn't have any
problems with this, however mobile will.
Will Angular or other libraries have any issues running when compiled
in this format? (console throws errors if .map file is not in same
Nope. the .map issues won't affect your end-user unless they open the
console. This can also be fixed by your build process producing a .map file
for the combined version.
Surely a 500kb+ file will still take a long time to load, so will this
really improve load times?
Yes, because you're not passing cookies and http headers back and forth
with each request.
However, there are things that you can do to improve load time. For
example, I split my files into two categories:
Files that are needed immediately, and files that can be loaded later.
Unfortunately, you can't really make this distinction with angular
without consequences because all routes need to be defined up front, along
with all controllers and services required by said routes. The only thing
you can really remove would be in-line templating because templates can be
requested later via ajax.
I was able to make a split like this for one of my applications; I split
the administration code and client code, and only included the
administration code after successful admin login. This is inconvenient for
admins because an admin can't go directly to an admin page and can't reload
an admin page without having problems, but it did reduce load time for
This leaves you with only one real option: reduce the overall size of
the content you are including. This means making controllers and services
as reusable as possible, and not including code that isn't necessary.
Looking at your example, you're including jQuery. jQuery's purpose is to
make it easier to write ajax requests and select/manipulate DOM nodes, both
of which are already covered by Angular. Therefore, you can reduce the size
of your codebase by removing jQuery and instead using angular-based