0

I read in some sites and here too that jquery.js and jquery.min.js are both the same functionally but the .min one has all unnecessary characters removed in order to make the file size smaller. Also I read somewhere that whether in minified CSS or in minified JS all the white spaces are removed so as to make it smaller.

Hence my question comes

"Does white spaces in CSS/JS/Jquery or any other programming language or markup language consumes space?"

And if I am writing custom CSS or JS then how can I make it minified one.? Is there any tool?

Community
  • 1
  • 1
  • It is negligible. Check [this link](http://nadeausoftware.com/articles/2007/03/don_t_use_html_white_space_removal_speed_web_site) for a detailed speed test analysis. – davidcondrey Apr 01 '15 at 05:23

4 Answers4

0

Yes, whitespace does take up space. Removing or compressing code can sometimes yield up to 95% compression which means it will load that much faster.

There are a lot of tools out there. If you are looking for something very simple just to test it out I would suggest trying an online resource like:

http://refresh-sf.com/

This is a web interface to compress your JavaScript or CSS. This tool uses UglifyJS 2, Clean-CSS and HTML Minifier.

Ideally if you are using some sort of modern tooling process like Grunt or Gulp you can automate the compression as part of your build process.

Google has recently released their version:

https://developers.google.com/speed/docs/insights/MinifyResources

You should minify your HTML, CSS, and JavaScript resources. For minifying HTML, you can use PageSpeed Insights Chrome Extension to generate an optimized version of your HTML code. Run the analysis against your HTML page and browse to the 'Minify HTML' rule. Click on 'See optimized content' to get the optimized HTML code. For minifying CSS, you can try YUI Compressor and cssmin.js. For minifying JavaScript, try the Closure Compiler, JSMin or the YUI Compressor. You can create a build process that uses these tools to minify and rename the development files and save them to a production directory.

Here is a link to Google's "Getting Started with the Closure Compiler Application" that will go over how to compress your files:

https://developers.google.com/closure/compiler/docs/gettingstarted_app

xengravity
  • 3,501
  • 18
  • 27
0

yep!

  1. variables in function cut off one char.
  2. Replace \n -> "_"(space)
  3. Replace "__" (2space) -> "_"(space)

Moreover, you can even write a single line =)

Rahul Tripathi
  • 168,305
  • 31
  • 280
  • 331
Дмитрий Чистик
  • 608
  • 5
  • 16
0

Minification is the process of removing all white space, comments, new line characters, and any other non-neccessary characters required for the code to run.

Minifying can lend you greater performance rewards when used alongside file concatenation (combining multiple source code files into one, limiting HTTP requests).

If you run queries through Google like javascript minify or css minify, you'll find an ambundance of tools which will automate these processes.

zep_fan
  • 776
  • 5
  • 13
0

It kinda depends on what you mean by "consumes space." Yes, whitespace is stored in the file as a series of characters, so it increases the filesize somewhat. Removing that whitespace can reduce the amount of data that has to be transferred to the user. Unminified JQuery is 242kb, compared to 82 for the minified version (this also includes replacing human-friendly variable names with one- or two-character ones, not just reducing whitespace).

However, the vast majority of the time, your webserver will gzip the data it's sending, to be silently unzipped by the browser. Gzipped, Jquery is only 72kb; gzipped and minified, it's 29kb. The benefit of minification is significantly reduced by gzipping responses.

Erin Call
  • 1,764
  • 11
  • 15