Should JavaScript/jQuery code be in it's own file?

Hi Camillia,

It is a good practice to put JavaScript in its own file and minify it while it still does not guarantee 100% protection from attackers it is a one more door for them to break in to.

Regards,
Chinmay.

How do we minify a js file?

You're supposed to minify/compile your JS code on the production server :
https://closure-compiler.appspot.com/home

Usualy this is done with a tools like gulp or grunt :
https://gulpjs.com
https://gruntjs.com

Thanks. They have  js code in the html/razor. Not huge js but still it's better to have its own files.

Thanks, Chris. Let me read and understand.

I'll take a look. Thanks

This means minify your JavaScript and concat into a single file

The non-mission-critical js code can go into one file, correct? and minified

Load asynchronously

How? not sure exactly what this means and how to achieve it?

put mission critical code in the document

This one I understand. The important JS code that are used for processing (there's one in the code to generate a dynamic reports page) is ok to be in the page.

Treeshaking. I found this. It needs to be done on the production server?  https://www.engineyard.com/blog/tree-shaking

The non-mission-critical js code can go into one file, correct? and minified

Yes

How? not sure exactly what this means and how to achieve it?

Check out $.getScript(url, successCallback)

There is also the async attribute on the <script> tag that will load the scripts async - the page will load and start to "run" while the script loads in the background.

This one I understand. The important JS code that are used for processing (there's one in the code to generate a dynamic reports page) is ok to be in the page.

This would be code that would be need immediately after document load - either initialising the interface or creating UI elements.

ah, s async here means the page loads, starts to run while the JS code loads.

Is it correct that JS code needs to be at the bottom of a page? for example, we have an aspx page, the top has the html code stuff, the <script> tag for jQuery code is at the bottom...after all the razor/html code.

Some said that to me few yrs ago...that JS code needs to go to the bottom. I think loading/executing the JS code was the reason he gave me.

The JS code can be put anywhere in the code based on where it is being called. In some cases the location matters, for example, if your JS refers to a page element that is present in body and you are not checking if the Page is completely loaded (i.e. all DOM and other necessary components are properly initialized and ready to use) then your script might throw an error.

s it correct that JS code needs to be at the bottom of a page?

No, there are endless debates out there whether to put it in the head or the bottom. There are arguments for both. In most cases it does not really matter - when you start getting to sites like Facebook then minor optimisations can mean a huge saving.
For instance if you can cut down on 1 server request per Facebook member - what does that mean for your server infrastructure.
For your local mom and pop negligable for the likes of Facebook and Google - those minor savings add up to an impressive amount when you look at the scale of their user base.

My strategy is I look at what the big guys do and then adopt what is practically do-able - in other words I don't spend time and effort on complex implementations that make a negligible difference on the scale I am using. Take what works and feasible add a good dollop of common sense and try to keep a balance between optimisation and manageability.