w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
Most efficient way for browser to load resources

Will this mean the file won't get cached by browsers because it's too large?

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 directory)

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 non-admin users.

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 plugins.

© Copyright 2018 w3hello.com Publishing Limited. All rights reserved.