We Keep Coding

Is it possible to load external js files/libraries into Acumatica?

I'm working on a new Acumatica screen for our company that will require some javascript code to retrieve and display a map object (from ESRI).
This code requires an external .js file that is included to the HTML by the javascript code itself. Everything works fine if I use a blank HTML page to test this.
The problem I have is that when I try using the same code from inside the Acumatica screen, it doesn't load this required external file, and therefore the code does not work properly.
I attempted to load the full .js file code along with my code, but it returned the following error:
error CS8095: Length of String constant exceeds current memory limit. Try splitting the string into multiple constants.
I haven't tried splitting this file into multiple strings (as the error message suggests), because I want to make sure there isn't a cleaner and more professional, direct/right way to do this.
Is it possible to manually import this external .js file into our Acumatica instance, so I can point to it instead? (in case it makes a difference if it's hosted in the same environment)
or, is there any way to make Acumatica able to load external files so we can keep using our current approach? (any setting that may be preventing external files from loading?)

I'm not sure i fully understand the question. What comes to mind however is you may be looking to use the PXJavaScript control. I used this link to help get my head wrapped around how to use the control. We had a need to trigger something off with Java Script and the PXJavaScript control got us to the end result we needed. Let me know if this gets you in the right direction?
Dynamically Change Button Color

Lifecycle of javascript file inside an html file

I have a very basic question about how javascript engine of a browser say chrome executes a javascript file embedded inside the html file. I am assuming, first the html page is rendered and then javascript is executed. My question is that when the engine reaches last line of the js file, what next?. Does all the callback methods of events remain active even after hitting the last line or after last line is hit, everything related to the js file is washed out from memory and js terminates?. Or does the js writer have to take care to put a loop in js file so that the js is functional and the last line is never hit.

Does all the callback methods of events remain active even after hitting the last line?
Yes.
does the js writer have to take care to put a loop in js file so that the js is functional and the last line is never hit?
No; in fact such an endless loop would provide a pretty bad user experience.
More generally speaking: it's very easy to try out these things and see for yourself. All you need is a browser and a text editor :-)
(Or even just an in-browser editor like codepen.io or jsfiddle.net or a bunch of others.)

How do I justify the use of multiple JS files for view specific procedures

Basically, we have a massive core.js file with lots of jQuery calls that have no structure whatsoever. Example:
$(document).ready(function() {
$(document).on({
change: function() {
// some code specific to 1 view
}
},
"#some-id-name-that-may-exist-in-multiple-views" // like "bank-box"
});
// This code isn't even inside a closure, so it get's executed in all views but '.metadata' only exist in one, braking the whole system.
checkProgress($.parseJSON($('.metadata').text()));
Now, as the comment says, it has happened before that a whole section of the system breaks because of a JS error that usually happens due to the share of JS code. (Ironically, thanks to the sharing of said code, Continuous Integration caught it because of the only 1% of the code that's tested)
How do I justify the usage of separate JS files that holds view-specific logic, instead of a massive core.js that exist because of the "the browser would cache all of the JS on the first load" argument. Any resources or links are welcome.
On the other hand, maybe multiple files is an incorrect approach and we need to have 1 core.js file, but the code should be in a different way so that it doesn't conflict like it does right now. If this is the case, then how.

You can first check for the existence of those elements, that you are working on. You could rewrite your this code like this:
if( $(".metadata").length ){
checkProgress($.parseJSON($('.metadata').text()));
}// if $(".metadata").length

Putting JavaScript at the end of the page produces an error

I recently read that for a faster web page load it's a good practice to put the JavaScript links at the end. I did, but now the functions of the referenced file doesn't work. If I put the link at the beginning of the page, everything is fine.
Does this thing of putting JavaScript at the end work only under certain circumstances?

I went through some testing with this as well. If you are loading a Javascript file it is faster to put it at the end BUT it does come with some important caveats.
The first is that doing this often made some of my visual effects noticeable. For example, if I was using jQuery to format a table, the table would come up unformatted and then the code would run to reformat it. I didn't find this to be a good user experience and would rather the page came up complete.
Secondly, putting it at the end made it hard to put code in your pages because often functions didn't exist yet. If you have this in your page:
$(function() {
// ...
});
Well that won't work until the jQuery object is defined. If it's defined at the end of your page the above will produce an error.
Now you could argue that all that styling code could be put in the external file but that would be a mistake for performance reasons. I started off doing that on a project and then found my page took a second to run through all the Javascript that had been centralized. So I created functions for the relevant behaviour and then called the appropriate ones in each page, reducing the Javascript load run time to 50-200ms.
Lastly, you can (and should) minimize the load time of Javascript by versioning your Javascript files and then using far-futures Expires headers so they're only loaded once (each time they're changed), at which point where they are in the file is largely irrelevant.
So all in all I found putting putting the Javascript files at the end of the file to be cumbersome and ultimately unnecessary.

You do have to pay attention to the ordering, but libraries like JQuery make it easy to do it right. At the end of the page, include all the .JS files you need, and then, either in a separate file or in the page itself, put the Jquery calls to act on the page contents.
Because JQ deals with css-style selectors, it's very easy to avoid any Javascript in the main body of the page - instead you attach them to IDs and classes.
This is called Unobtrusive Javascript

Every Yahoo YUI example file I remember has almost all the JavaScript at the end. For example,
Simple Event Handling
Basic Drag and Drop
JSON: Adding New Object Members During Parsing
It looks like Yahoo Practice is roughly "library code at the beginning of <body>, active code at the end of <body>."
Beware, though, this may result in the Flash of Unstyled Content syndrome.

Javascript Commands Only Executed When Unminimized

I want to log to the console when I'm using un-minimized JavaScript files.
Comments are taken out already when I minimize JavaScript. I'm wondering if there's a way I can write a command that isn't commented out but will still be taken out when I minimize the JavaScript file.

I think I'd be pretty upset if a Javascript minimizer changed the behaviour of my code based on some funny/clever/odd code construct. How could you ever be sure that code construct isn't there intentionally?
As has been suggested, have a variable that disables logging. Then as part of your minimize script or batch job, you can swap that variable to its non-logging state using sed (for example) before minimizing.

If your goal is just to reduce the js size you can separate you logging functions into a separate file.
In your "main" js add a function function doLogging(object){} then in your separate logging functions file replace the function with function doLogging(object){/*your logging code*/};
Just remember to include your main js before the logging js. When you minify just comment out the logging script tags from the html. This way you will only have one (or a couple of) empty function definitions in the minified js and one line of code calling those functions per loggingn action.

Unless whatever you're using to minimize your JS supports conditional statements I don't think you can do this.
Why not just log things if a certain variable is set?