精简javascript代码的优点是什么?

What are the advantages of minified javascript code?

本文关键字：是什么 javascript 代码 精简      更新时间：2023-09-26

我正在阅读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. 代码行上的"number"是什么意思?似乎结果的索引和返回函数对象的索引。对吗?

  2. 为什么作者写这样的代码?这种编码约定有什么优点吗?

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

通常，开发人员会在一个完整的、带注释的版本中实现它，然后使用像UglifyJs这样的工具来生成一个缩小的版本。

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

  • myLib.js(原始版本，用于包含在开发模式中进行调试)
  • myLib.min.js(精简版本，用于生产)

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

JavaScript代码最小化的主要原因是

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

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

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

这通常在向web服务器发布代码时作为构建步骤完成。有很多工具，比如uglify，可以帮你完成这个任务。

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

例如，在应用缩小之前检查下面的css代码，在那里你注意到额外的空间，缩进和;评论。

.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}
相关文章：