Multi
Multi
JavaScript Compression; [√]
Topic Started: Thursday, 15. March 2012, 18:44 (970 Views)
Aidan
Member Avatar
Level 12
JavaScript Compression

Before I begin, I would like to inform you that you can read more about the positives to JavaScript Compression. To give you a little idea, Compression basically makes the JavaScript as tiny as possible without ruining the code for the purpose of more-efficient loading time. For the purpose of this tutorial, you will need to direct your attention to the actual JavaScript Compressor itself.

Upon entering the Compressor page you will notice a box that will allow you to "Add a URL". Simply put, this means you may add a URL to any JavaScript file (one that ends in .js) rather than extracting the content from that file in to the bigger box at the bottom of the Compressor. I personally find it more secure to use the latter form of input, but it all comes down to opinion.

Here is a basic outline of what will be explained within the tutorial:
  1. Change "Optimization" to Whitespace only
  2. Copy and paste your JavaScript below the line that says "ADD YOUR CODE HERE"
  3. Click Compile
  4. Copy the outcome, paste it in Notepad, save that in .js format, and upload that file


The first thing you are going to want to do is change "Optimization" to Whitespace only. I cannot tell you why this is, for it was Joe (and Reid) who directed me to this in the first place, but I do know that it is necessary. The rest may remain default. Having changed the Optimization should change what is in your box at the bottom to the following:
Code:
 
// ==ClosureCompiler==
// @compilation_level WHITESPACE_ONLY
// @output_file_name default.js
// ==/ClosureCompiler==

// ADD YOUR CODE HERE
function hello(name) {
alert('Hello, ' + name);
}
hello('New user');


The next thing you are going to want to do is copy and paste your JavaScript from wherever it may be - anything from a JavaScript file to raw JavaScript in <script> tags. The pasting will occur in that box that I continuously mention: make sure to do as directed and place the code below the line that says "ADD YOUR CODE HERE". The rest is simple: all you have to do is click "Compile" above the box and your outcome should be to the right-hand side under the "Compiled Code" tab. You could opt between using the outcome or the JavaScript file; however, I typically choose to copy the outcome, paste it in Notepad, save that in .js format, and upload that file to my test board.
Off
Profile
Quote
Top
 
Andrew
Member Avatar
ぼくたちがすべてはばか。
Nice guide for those of you who run tons of JS.

By the way you can always de-compress, or extract, compressed JS through http://jsbeautifier.org/
Posted Image

Professional web design/development services.http://wildandrewlee.com/
Off
Profile
Quote
Top
 
Geoffrey
Member Avatar
It's a love story, baby just say yes
Nice doc, I'm sure it will help the coders out there.
Consider this statement my permission to convert my themes to other platforms. Please link back to http://geoffreykoester.com. Be sure to rehost all theme images on the new platform as we do not know how long they will redirect. Also some boards hosting theme/skin images may not survive the move.

Posted Image

Other Sigs
Awards & Memories
Off
Profile
Quote
Top
 
Aidan
Member Avatar
Level 12
Pro
Thursday, 15. March 2012, 19:18
By the way you can always de-compress, or extract, compressed JS through http://jsbeautifier.org/
Correct. If you want to compress something for quicker loading time, but then you have to edit something/change something, you could easily just "beautify" your JavaScript with the link Pro provided.

Simple and easy. :)
Off
Profile
Quote
Top
 
Aidan
Member Avatar
Level 12
Outline Tips & Tricks
A P P R O V E D

Your tutorial has been accepted and your tokens have been added!
Off
Profile
Quote
Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Coding & Development · Next Topic »

Welcome Guest [Log In] [Register]
Outline Live
Loading..
Loading..