Some jQuery beginners always have a confusion on which core jquery library to use, whether it is jquery.min.js or jquery.js or both. Actually these two files are same and we need to use only one depending on our needs. One is called compressed version (jquery.min.js) mainly used for deployment and the other is uncompressed version (jquery.js) used for development.
This version is normally readable and having well-commented functionalities and line-intended. Mainly uncompresssed jquery versions are used to alter some code or functionality in the jquery core library. The latest development version of jQuery library (1.10.2) may have a file size of about 267 KB. This version helps you to debug core library if you need to make any change in it. jQuery plugins which are available as development version is also meant for the same reason to debug and use.
Jquery Compressed
Minified jQuery has a file size of about 32 KB and also it may only contain a line. It is useful for the deployment process since the file size is smaller. There are different online code compressors available to you. For eg: , , etc. You can compress your javascript codes and jquery plugins using these services.
Here, you can download the latest versions of jQuery, at this point it is v3.3. As you can see in the above figure, you can download compressed or uncompressed versions of jQuery library. Compressed version should be used in production environment whereas uncompressed version should be used in development. Compressed version minimizes the library by eliminating extra white space, line feed and shortening the variable and function names. So, compressed version is not readable. Uncompressed library is a readable file which is useful while debugging.
Also called Minified and Unminified. Usually when hosting your website you want all your files to be as small as possible so that your website will load quickly. What a compressed or minified jQuery file is, is a jQuery file which has been made as very small in bytes. This is achieved by removing all spaces and comments between codes making it almost impossible to read. That was what we saw on the webpage when we clicked the download link in the last lesson. A compressed file is usually referred to as Production-ready. Take a look at the jquery.js file you have. It is a compressed file.
An uncompressed jQuery file is one that has a lot of white space (e.g. tabs, line-breaks etc.) and comments to enable the developer read and understand the code. As a result they usually end up being quite large. Because it is meant for the developer to go through, it is referred to as the development version. So it should only be used during the development phase of your website if ever.
One advantage that developers use this plugin over the builtin jquery-migrate, is that you can choose to use the development, uncompressed version of jquery-migrate, so that you could fix warnings of jquery-migrate and eventually get rid of this extra dependency.
jQuery plugin to load and process compressed versions of alpha transparent PNG images saving approx. 60-80% in filesize. The plugin requires minor changes to .htaccess and some PHP to compress the original images. In addition Q.js ( ) has to be included before this plugin!
Compressed and uncompressed copies are available. The compressed copy is more suitable for production sites, as it is smaller and uses less bandwidth. The uncompressed version can be used for development or debugging. However, unless you plan to change/check the jQuery library itself, the compressed copy should be fine for both production and development.
The funny part is that when I look in my %SystemDrive%\inetpub\temp\IIS Temporary Compressed Files\MySiteName, I see the jquery.js file there, and its size is 24 KB. But in the browser, according to the Net tab on Firebug, the size is 69 kb.
I noticed that in my Failed Request Log (which I had to set up a rule in that made sure it logged successful requests) the jquery file compression was not a success with the error code NOT_FREQUENTLY_HIT. So I tried making a bunch of requests manually by refreshing the browser and all of a sudden the jquery file had been compressed.
Seeing an outdated version? Make sure you're not using the "automatic version" links, like /jqueryui/1/..., but instead use URLs referring to exact versions. Due to concerns over caching and lack of compatibility between even minor versions, we have deprecated and stopped updating the automatic version aliases some time ago, so they will forever refer to an old version (in order to not break existing sites that still use them).
Download thickbox.js or thickbox-compressed.js, ThickBox.css, and the loading graphic (loadingAnimation.gif) to your local machine (or cut and paste the code from the tabs). Along with these three files, a copy of the jQuery JavaScript library is needed. For this site, and ThickBox, I am using the compressed version of jQuery.
1. ThickBox requires the jQuery JavaScript library; because of this, you will need to include the jquery.js file in the head element of your web page, followed by the thickbox.js file (NOTE: jquery.js must come first in the source order). Example below:
Once you have included the .js files, open thickbox.js or thickbox-compressed.js and locate the tb_pathToImage variable at the top of the page. Once you have found it, make sure to change the value of tb_pathToImage to the path where the loadingAnimation.gif file is located on your own server.
JQuery is also used in a compressed (.min) and non-compressed version. You can use the uncompressed version of the library during development. In a compressed version, the code is minimized and it is almost impossible to make any changes to it. Therefore, the compressed version is used already on the working project for more optimal work, since the library in this version takes up much less space and is processed faster.
Well, imagine that you are using compressed versions of your files on your production site, including a compressed version of jQuery. You get a report that an important customer is running into a problem. Then how do you debug it? You could debug it a lot easier if you had the uncompressed source, but using that on your high-traffic production site isn't an option.
If you are using jQuery from any of the CDN (jQuery, Google, Microsoft) then you don't have to worry about sourceMappingURL variable value because it is already set. Below screenshot is of jQuery 1.9.0.min.js and notice that the value is already set to jquery.min.map file.
When hosting your own copy of jQuery, copy the map to your server and use it from there. For simplicity we assume that the compressed and uncompressed copy of jQuery is in the same folder as the map file; this is the case for CDN versions and you should follow the same rule if you make local copies.
The map file name is the same as the compressed version, with .map replacing .js. Do not rename the files when you copy them. So, if you were to use a local copy of jquery-1.9.0.min.js the corresponding map file would be jquery-1.9.0.min.map and the uncompressed file would be jquery-1.9.0.js in the same folder.
And you must be wondering how to I create .map file or what are the content of .map file? Well, you can get all the details here. If you want to take a look at jquery.min.map file then open this URL.
By making use of the above command, you ensure that the jquery is installed in the node_modules directory. The uncompressed release, a map file, and a compressed release will also be built and could be found inside node_modules/jquery/dist.
Almost everything is only done when the jquery reads or writes or manipulates the document object model (DOM) list of elements. We need to ensure that the events and other basic components are being added the moment our DOM file is ready. There are two ways again of making your events to do their working. One is to call those events from inside the page and therefore we can make use of $(document).ready() function. All the content that is written inside it will be loaded as it is, the moment the DOM is loaded and long before the page contents are loaded. A ready event can be registered to make this happen.
Jquery also allows the use of multiple libraries all at once without disturbing each other. There is one other library which is known by the name of MooTool javascript libraries and the jquery together can be used effectively.
There are other syntactical things which are more relevant for jquery such as making use of $selector.action() field where the $ sign is used to symbolize the query as in access and define it.A selector is used to query or find the HTML elements whereas the action() is used for performing on the elements. The document ready events are also important as they ensure that the scripts or the piece of code do not run well in advance before the document has even finished loading or is in the ready state.
Both compressed and uncompressed versions of jQuery can be downloaded free from the internet. A compressed version should be used in the production environment whereas the uncompressed version is to be used in a development environment. Compressed version minimizes the library by eliminating extra white space, line feed and shortening the variable and function names. So the compressed version is not readable. An uncompressed library is readable, hence useful in debugging. Once the appropriate version is downloaded, it can be referenced in a file using a script tag.
The scripts are loaded out of a virtual /scripts/ and the two files are jQuery.js and ww.jquery.min.js. jQuery.min.js shows up in the compressed folder, ww.jquery.js does not. Both are getting loaded in tandem as static resources typically so the usage pattern should be nearly identical.
Do you get a compressed response if you send request to www.jquery.js directly with Accept-Encoding: gzip header? One possibility is that file size of this file is small and you are running into minFileSizeForComp (default is 256 bytes). If you are not seeing compressed response to the file and minFileSizeForComp is not the reason, try turning on freb tracing and see why compression didn't happen in the log.Thanks,Kanwal 2ff7e9595c
Comments