What are the benefits of minified javascript code?
I am reading the BemTv code . Then I saw weird 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:
-
What does "number" mean in a code string? It seems that the index of the result and object of the return function is by index. It is right?
-
Why is the author writing such code? Are there any benefits to this kind of coding conventions?
source to share
As @Jacob said .. Minified JavaScript means fewer bytes are loaded from the client's point of view.
Usually developers implement it in the full, commented version and then use a tool like UglifyJs to create a mini version.
Usually to view two versions of these files:
- myLib.js (original version intended to be put into development mode for debugging)
- myLib.min.js (shorthand for production)
Also, as Node grows, it becomes really common to implement your codebase as separate, readable modules, and then use a bundling tool like Webpack and Browserify to create a single package that often contains not only your minified code, but also most of the dependencies in one bundle.js
. It's pretty straight forward.
source to share
The only benefit of minified JavaScript is to allow the client to download fewer bytes, allowing faster page load, less battery use, less mobile data plan, etc.
This is usually done as a build step when releasing the code to the web server. There are many tools for this, such as uglify.
source to share
Minification techniques can help you eliminate unnecessary symbols within a file. When you write code in the editor, you probably use indentation, comments. These methods are best practice to keep your code clean and readable, but they also add extra bytes to your document.
For example, check with the css code below what minification is applied where you will notice extra space, indentation and 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's the same snippet after applying the thumbnail.
.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}
source to share