6

I'm reading the code of BemTv. Then I saw the strange Javascript code like below. 

//n = {} , r = [5,1]
! function e(t, n, r) {
    console.log(t)
    function i(s, a) {
        if (!n[s]) {
            if (!t[s]) {
                var c = "function" == typeof require && require;
                console.log(require);
                if (!a && c) return c(s, !0);
                if (o) return o(s, !0);
                throw new Error("Cannot find module '" + s + "'")
            }
            var u = n[s] = {
                exports: {}
            };
            t[s][0].call(u.exports, function(e) {
                var n = t[s][1][e];
                return i(n ? n : e)
            }, u, u.exports, e, t, n, r)
        }
        return n[s].exports
    }
    for (var o = "function" == typeof require && require, s = 0; s < r.length; s++) i(r[s]);
    return i
}({
    1: [function(e, t) {
        "use strict";
        t.exports = e("./src/main")
    }, {
        "./src/main": 46
    }],
    2: [function() {}, {}],
    3: [function(e, t) {
        ...........

source: http://cdn.clappr.io/bemtv/latest/p2phls.min.js

My questions are:

  1. What's the meaning of 'number' on the code line? It seems that index of result and return function object by index. Is it right?

  2. Why does the author write the code like this? Are there any advantages for this kind of coding convention?

Santiago Hernández
  • 5,438
  • 2
  • 26
  • 34
kyunghwanjung
  • 490
  • 6
  • 17
  • 5
    this is what we call minified/compressed javascript code – Santiago Hernández Jul 29 '15 at 02:06
  • 1
    It is an immediate invocation of a function with a literal object as a parameter. – PM 77-1 Jul 29 '15 at 02:08
  • 2
    Nobody writes code like this from scratch (it would be a horrible practice if true as it is completely unmaintainable like this). I was likely written with more normal sounding variable names and then run through some sort of minimizer to reduce the variable names to single letter names. – jfriend00 Jul 29 '15 at 02:13
  • 1
    possible duplicate of [Why do people minify css and javascript, when we have gzip?](http://stackoverflow.com/questions/16196358/why-do-people-minify-css-and-javascript-when-we-have-gzip) – gfpacheco Jul 29 '15 at 02:35

4 Answers4

11

As @Jacob said.. Minified JavaScript means less bytes being downloaded from the client perspective.

Normally, developers will implement it in a full, commented version, and then use a tool like UglifyJs to generate a minified version.

It's common to see two versions of these files:

  • myLib.js (the original version, meant to be included in development mode for debugging)
  • myLib.min.js (the minified version, meant for production)

Moreover, with the rise of Node, it's becoming really common to implement your codebase as separate, readable modules and then use a bundling tool like Webpack and Browserify to generate a single bundle, that often contains not only your minified code, but also most of the dependencies in a single bundle.js. It's pretty straight forward.

Andre Pena
  • 56,650
  • 48
  • 196
  • 243
6

main reason of minification of JavaScript code is

1) Reducing the page load time of application.

2) Many are use for security purpose they don't want to share code with others.

Umashankar
  • 694
  • 7
  • 21
4

The sole benefit of minified JavaScript code is allowing a client to download fewer bytes, enabling the page to load faster, use less battery, use less of a mobile data plan, etc.

This is usually be done as a build step when releasing code to a web server. Many tools, like uglify for example, exist to do this for you.

Jacob
  • 77,566
  • 24
  • 149
  • 228
1

Minification techniques can help you to eliminate unnecessary characters within a file. When you are writing code in an editor, you likely use indentations,comments. These methods are best practice to certainly keep your code clean and readable, but they also add extra bytes to your document.

For example check with the below css code before minification is applied, where you notice extra space, indentations& comments.

.navbar-default{
  border-radius: 0px;
  background: -webkit-linear-gradient(to right,#dd4959, #852742 );  /* 
  Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right,#dd4959, #852742); /* W3C, IE 10+/ 
  Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *
       }
  #menu {
       border-radius: NaNpx;
       margin-top: 69px;
       margin-left: 66px;
       margin-bottom: 48px;
       background: -webkit-linear-gradient(to right,#dd4959, #b852742 );  /* 
       Chrome 10-25, Safari 5.1-6 */
       background: linear-gradient(to right,#dd4959, #852742); /* W3C, IE 
       10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        }
       #form{
          /* fallback for old browsers */
          background: -webkit-linear-gradient(to right,#dd4959, #852742 );  
         /* Chrome 10-25, Safari 5.1-6 */
          background: linear-gradient(to right,#dd4959, #852742); /* W3C, IE 
          10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
          padding-top: 10px;
           padding-left: 120px;
           }
           #form h1 {
           color: white;
           font-family: 'Poppins';
           font-size: 60px;
            margin-left: 11px;
                }

And here is the same snippet after minification has been applied.

.navbar-default{border-radius:0;
  background:-webkit-linear-gradient(toright,#dd4959,#852742);
  background:linear-gradient(to right,#dd4959,#852742);
  background:linear-gradient(to right,#dd4959,#852742)}
#form{background:-webkit-linear-gradient(to right,#dd4959,#852742);
  background:linear-gradient(to right,#dd4959,#852742);
  padding-top:10px;padding-left:120px}
#form h1{color:white;font-family:'Poppins';
  font-size:60px;margin-left:11px}
Vikas Periyadath
  • 3,088
  • 1
  • 21
  • 33
Poornima Subramani Naidu
  • 393
  • 2
  • 8