What is the difference between using . js and .min.js files?

Asked

Viewed 9,073 times

27

When should I use a Javascript or jQuery file, with file min and jspure, like:

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
javascript jquery

  • Do any of the answers answer your question @pnet? If yes, don’t forget to mark the answer as accepted.

4 answers

27


It was taken as convention, to name minified javascript files, with the termination .min.js.

Differences

The difference between the minified and non-minified file is the file size... a functionality does not change (or at least should not change, if this occurs is a bug).

The archives jquery-1.10.2.min.js and jquery-1.10.2.js must have the same functionality.

The file not minified .js is used to development and debug, for he is readable for humans.

The minified file .min.js is used for production, because it is smaller than the one used for development, and therefore will save on bandwidth quantity used by the server.

How it works

The minification consists of a series of transformations in the original javascript file:

  • reduction of variable names size

  • removal of unnecessary comments and spaces

  • removal of insignificant characters (e.g. some ; at the end of statements are optional)

  • replacement of equivalent instructions, an example that I find interesting, is in this question that I raised about the operator && as a substitute for a ternary operator, or as a substitute for a if whole, depending on the case: What is the && in between strings operator?; the operator || can also be used in size reduction operations, as explained in another response: Is there a null coalescence operator in javascript? Like the ?? C operator#

  • copy of the function body to the call location, when this is worth it (e.g. when a function is called only at one place of the code)

Tools

If you ever need to minify your own javascript files, you can use one of these tools:

References

These functions must Meet These general:

  • it is not recursive
  • the Function does not contain Another Function -- These may be Intentional to limit the Scope of closures.
  • Function is called only Once OR the size of the inline Function is smaller than the call itself.
  • the Function name is not referenced in any other Manner

8

Archives .min come from the English minified, which, in literal translation, means minificado, or, less technically and more colloquially, compactado.

These file types often have their variables and names abbreviated because their destination is not human eyes, but rather machine languages. It means that, $variavel or nomeDeFuncao() may become, respectively, $v and f(). This practice, when used in a large file and with a lot of demand, makes it less resource consuming - the file becomes lighter, the band to consume it will be smaller and the reading will be done with more speed.

The ideal is that we use files .min when we do the deploy of our application. In other words, when we make our application available to the world, we make the files .js - the .css can also be minified. As I said, the language of a compressed file gets more machinery and does not have as its focus the human eye, therefore, when we provide an application, the need is for the machine to read (or download, as you prefer) faster and the goal is not to edit or modify the code, even if third parties have access to it.

Archives without the suffix .min are usually for development. This is because, most of the time, its code is clean and it is in the form in which it was written: sometimes with comments and documentation. Remembering that, not always a file without the suffix in question means that it nay is compacted.

Therefore, don’t worry. If you write Javascript, do it your way - with comments, documentation and variables with "temporary" names, because ultimately, when your application is for production, it won’t matter if the file is compressed.

But attention, always have good practices in mind - it’s not because you have the power of minification you should write whatever you want. Get used to the right way that when this becomes a habit, you will be a expert.

For minification, my favorites are:

And don’t forget that languages like ruby (with rails) and C#/MVC (with .NET) has the ability to do this natively with its internal compressors.

  • 1

    +1 for you for mentioning that some platforms (such as .Net) have tools to do this automatically, and about recommending good practices.

3

The file.min.js, has the same information as the other, but in a minified way, what? To avoid loading heavy java script or css files to the page, in the minifier(min file) tabs, blank spaces are removed in order to decrease the file size and improve the performance and speed of the page while loading, because the file gets lighter.

2

By and large an archive .min.js is ideal to be used in the production environment, because it is a minified file, that is, all identations are removed to reduce the physical size of the file, making it to be loaded faster, while the non-minified file has all the indentations to improve the reading of the file in a development environment.

I can use a non-minified archive in the production environment?

Of course you can, but in some cases the request time of an unmonitored file can be 3 to 4 times longer than the minified file.

How to minify a javascript file?

One of the most used animals for file validation and minification .js today is the Grunt.
Another possibility to minify files is the ant, but recommend studying a little about these and other tools to make the best choice for your reality.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.