为什么要缩小HTML，CSS和JavaScript（JS）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第19天，点击查看活动详情

为什么要缩小HTML，CSS和JavaScript（JS）

在创建HTML，CSS和JavaScript（JS）文件时，开发人员倾向于使用间距，注释和命名良好的变量来使代码和标记本身可读。它还可以帮助以后可能处理资产的其他人。虽然这在开发阶段是一个加分项，但在提供页面时，它变得消极。Web 服务器和浏览器可以在没有注释和结构良好的代码的情况下解析文件内容，这两者都会创建额外的网络流量，而不会提供任何功能优势。

为了缩小JS，CSS和HTML文件，需要删除注释和多余的空格，以及处理变量名称以最小化代码并减少文件大小。缩小的文件版本提供相同的功能，同时减少网络请求的带宽。

以下是开发人员编写 JavaScript 文件以在网站中使用的方式：

    // return random number between 1 and 6
function dieToss() {
  return Math.floor(Math.random() * 6) + 1;  
}
// function returns a promise that succeeds if a 6 is tossed
function tossASix() {
  return new RSVP.Promise(function(fulfill, reject) {
    var number = Math.floor(Math.random() * 6) + 1;
    if (number === 6) {
      fulfill(number);
    } else {
      reject(number);
    }
  });
}
// display toss result and launch another toss
function logAndTossAgain(toss) {
  console.log("Tossed a " + toss + ", need to try again.");
  return tossASix();
}

function logSuccess(toss) {
  console.log("Yay, managed to toss a " + toss + ".");
}

function logFailure(toss) {
  console.log("Tossed a " + toss + ". Too bad, couldn't roll a six");
}
// use promise paradigm to try three times to toss a 6
tossASix()
  .then(null, logAndTossAgain)   //Roll first time
  .then(null, logAndTossAgain)   //Roll second time
  .then(logSuccess, logFailure); //Roll third and last time

大量使用空格，使用长而连贯的名称来声明变量。

缩小后，相同的代码如下所示：

function dieToss(){return Math.floor(6*Math.random())+1}function tossASix(){return new RSVP.Promise(function(a,b){var c=Math.floor(6*Math.random())+1;6===c?a(c):b(c)})}function logAndTossAgain(a){return console.log("Tossed a "+a+", need to try again."),tossASix()}function logSuccess(a){console.log("Yay, managed to toss a "+a+".")}function logFailure(a){console.log("Tossed a "+a+". Too bad, couldn't roll a six")}tossASix().then(null,logAndTossAgain).then(null,logAndTossAgain).then(logSuccess,logFailure);

此示例代码的缩小版本小 48%。在某些情况下，缩小可以将文件大小减少多达 60%。例如，JQuery JavaScript库的原始版本和缩小版本之间存在176 kb的差异。

缩小已成为页面优化的标准做法。所有主要的JavaScript库开发人员（bootstrap，JQuery，AngularJS等）都为生产部署提供其文件的缩小版本，通常用名称min.js扩展名表示。

CDN 视角

缩小是前端优化 （FEO） 的主要组成部分，FEO 是一组可减小文件大小和关联网页请求数量的工具和技术。

但是，执行和管理缩小可能很麻烦。手动缩小是一种不好的做法，在涉及大文件的情况下几乎是不可能的。即使是自动化工具（其中有很多）也可能具有挑战性，因为您将被迫保留单独的开发和生产文件版本。保持它们同步通常是繁重的负担。

内容交付网络 （CDN） 提供自动缩小，从而减轻了缩小自己文件所需的开销。您可以将原始的未压缩文件保存在主服务器上，而CDN会自动在其缓存服务器和PoP上存储缩小的变体，从而与源修改保持同步。

Imperva CDN自动压缩存储在其服务器上的HTML，CSS和JavaScript文件，以加快页面加载时间。此操作无需您进行任何服务器配置，同时保护您的组织（无论大小）免受重大威胁（例如，DDoS 攻击）的侵害。