Question

我正在阅读BemTv的代码。然后我看到了如下奇怪的Javascript代码。

//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) {
        ...........

来源：http://cdn.clappr.io/bemtv/latest/p2phls.min.js

我的问题是：

代码行上'number'的含义是什么？似乎结果索引和返回函数对象的索引。这样对吗？
为什么作者会像这样编写代码？这种编码惯例有什么优点吗？

Answer 1

正如@Jacob所说..缩小的JavaScript意味着从客户端角度下载更少的字节。

通常情况下，开发人员会在完整的评论版本中实施它，然后使用UglifyJs之类的工具生成缩小版本。

通常会看到这些文件的两个版本：

myLib.js（原始版本，意味着包含在调试的开发模式中）
myLib.min.js（缩小版，用于制作）

此外，随着Node的兴起，将代码库实现为独立的可读模块变得非常普遍，然后使用Webpack和Browserify之类的捆绑工具生成单个捆绑包，不仅包含您的缩小代码，还包含单个bundle.js中的大多数依赖项。这很直接。

Answer 2

缩小JavaScript代码的唯一好处是允许客户端下载更少的字节，使页面加载更快，使用更少的电池，减少使用移动数据计划等。

这通常在将代码发布到Web服务器时作为构建步骤完成。许多工具，比如uglify，都可以为你做这件事。

Answer 3

JavaScript代码缩小的主要原因是

1）减少应用程序的页面加载时间。

2）许多用于安全目的，他们不想与他人共享代码。

Answer 4

缩小技术可以帮助您消除文件中不必要的字符。在编辑器中编写代码时，可能会使用缩进，注释。这些方法是确保代码清晰可读的最佳实践，但它们也会为文档添加额外的字节。

例如，在应用缩小之前检查以下css代码，您会注意到额外的空间，缩进和＆amp;评价。

.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;
                }

这是在应用缩小后的相同片段。

.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}

缩小的javascript代码有哪些优势？

4 个答案: