缩小 javascript 代码的优点是什么？

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

我的问题是：

1. 代码行上的“数字”是什么意思？似乎结果索引并按索引返回函数对象。这样对吗？

2. 作者为什么要这样写代码？这种编码约定有什么好处吗？

Answer 1

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

通常，开发人员会在完整的注释版本中实现它，然后使用UglifyJs 之类的工具生成缩小版本。

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

• myLib.js（原版，用于调试的开发模式）
• myLib.min.js（缩小版，用于生产）

此外，随着 Node 的兴起，将代码库实现为单独的、可读的模块变得非常普遍，然后使用像 Webpack 和 Browserify 这样的捆绑工具来生成单个捆绑包，该捆绑包通常不仅包含您的缩小的代码，但也是单个bundle.js 中的大部分依赖项。这很简单。

Answer 2

缩小JavaScript代码的主要原因是

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

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

Answer 3

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

这通常在将代码发布到 Web 服务器时作为构建步骤来完成。许多工具（例如 uglify）都可以为您执行此操作。

Answer 4

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

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

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

这是应用缩小后相同的 sn-p。

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