我们都经历过，你学会了如何建立一个很棒的网站，但一旦你发布它，它的速度就慢得让人无法忍受。

缩小javascript是加快网站响应时间的一种方法（同时压缩HTML），幸运的是，这是一个简单的过程。今天我将向你展示你需要知道的一切。

缩小是什么意思？

缩小的过程是一个简单的概念。当你用JavaScript或任何其他语言编写代码时，有许多功能只是为了使代码更容易让人理解——例如，计算机不关心你叫什么变量，也不关心括号里有多少空格。

通过缩小代码，您可以大大减少其文件大小。因此，较小的文件将更快地供您的用户下载。如果只编写一两行JavaScript，可能不会有明显的改进。但是，如果您正在编写大量代码，或者使用jQuery之类的大型库，那么很容易实现显著的性能提高和文件大小的大幅减小！

如果您从外部CDN加载代码，比如Google托管的库，那么您就使用了缩小的代码。

缩小的代码是什么样子的？

让我们看一些例子。很难看到小型化对小代码库的影响，所以我提前为它们的长长度道歉。

下面是一些未统一的JavaScript，来自我们的指南，介绍如何将JSON与Python和JavaScript结合使用：

// setup some JSON to usevar cars = [ { "make":"Porsche", "model":"911S" }, { "make":"Mercedes-Benz", "model":"220SE" }, { "make":"Jaguar","model": "Mark VII" }];window.onload = function() { // setup the button click document.getElementById("theButton").onclick = function() { doWork() };}function doWork() { // ajax the JSON to the server $.post("receiver", cars, function(){ }); // stop link reloading the page event.preventDefault();}

以下是缩小的代码：

function doWork(){$.post("receiver",cars,function(){}),event.preventDefault()}var cars=[{make:"Porsche",model:"911S"},{make:"Mercedes-Benz",model:"220SE"},{make:"Jaguar",model:"Mark VII"}];window.onload=function(){document.getElementById("theButton").onclick=function(){doWork()}};

这个缩小版的代码要小39%。在本例中，变量名保持不变，但已删除所有空格和注释。

下面是jQuery指南中的另一个示例：

// dfd == deferredvar dfd = $.Deferred();function doThing() { $.get('some/slow/url', function() { dfd.resolve(); }); return dfd.promise();}$.when(doThing()).then(function(){ c***ole.log('YAY, it is finished');});

以下是缩小的代码：

function doThing(){return $.get("some/slow/url",function(){dfd.resolve()}),dfd.promise()}var dfd=$.Deferred();$.when(doThing()).then(function(){c***ole.log("YAY, it is finished")});

这一次只减少了26%——这对于如此小的代码块来说仍然是非常好的。

下面是我们的Javascript和DOM指南中的最后一个示例：

//declare a new variable to hold a new h1 elementvar newHeading = document.createElement("h1");//add the text node to the documentvar h1Text = document.createTextNode("Heading Level 1");//make it a child node of the new headingnewHeading.appendChild(h1Text);//append this as a child of element defined as "bt"document.getElementById("bt").appendChild(newHeading);

注意这里有很多注释和空白。缩小版将文件大小减少了52%：

var newHeading=document.createElement("h1"),h1Text=document.createTextNode("Heading Level 1");newHeading.appendChild(h1Text),document.getElementById("bt").appendChild(newHeading);

以下是一些常见JavaScript库与其缩小版本相比的大小：

1. 高图表：1 MB&gt；201 KB
2. jQuery:270 KB&gt；90 KB
3. MOOTOLS:164 KB&gt；93 KB

其中一些库在压缩时显示出显著的大小缩减（约80%），而其他库则不太好（约40%）。也就是说，任何节省将使您的网站更快地为您的用户，并减少您的网络服务器上的压力。

如何缩小？

现在你知道它是如何工作的，它看起来是什么样子，让我们深入研究如何去做。别担心，根本不需要手动修改代码！有各种工具可以自由使用，可以为您处理流程。

它们有几种工作方式。大多数在线工具允许您复制和粘贴代码，然后它们将处理这些代码并返回到页面上。这些工具通常也可以让你上传多个文件。

下面是一个简短的在线工具的总结。他们工作的时候基本上是一样的，所以你不必太担心该选哪一个。

JSCompress——如果只是一个简单的工作，我个人最常使用这个网站。它的运行速度很快，他们甚至向你展示了他们用来构建它的工具。

JavaScriptMinifier——这个工具工作得很好，但它作为一个API确实很出色。这使您可以在现有网站的基础上构建自己的集成或服务。

JavaScriptMinifier——另一个同名网站，这个工具非常简单。没有选项或菜单，只有一个按钮。

Minify——这个网站看起来很棒，开发者显然已经注意到了这里的细节。

这个清单可能永远都会继续。有这么多的在线工具来缩小网站，很难出错。

缩小工具也作为命令行工具或JavaScript编辑器的插件存在。这些工具的使用速度通常要快得多，而且“只需使用”现有代码即可。不需要复制和粘贴，也不需要从同一个文件中的任何HTML或CSS中提取JavaScript。

如果您使用的是Microsoft Visual Studio，市场上的Bundler和Minifier扩展已安装了超过600000个！不仅如此，它还在GitHub上定期更新和提供。

如果你是像我一样的超级文本迷，那么Minify包就是你想要的。它的安装量超过61000次，是一个非常流行的软件包，如果您希望为一个开源项目做贡献的话，它也可以在GitHub上使用。

最后，如果您是PyCharm用户，可以将其配置为直接与许多常见的压缩工具（如YUI compressor）集成。其中许多工具直接为上面列出的在线工具提供动力。

注意事项

一定有陷阱对吧？没有什么是完美的。嗯，是的，有一个问题，但它很小，很容易解决：

缩小的代码无法还原到其原始状态。

缩小任何代码时，其原始形式将丢失。如果您希望轻松地进行重大更改，则需要保留它的副本—仅使用版本控制是不够的。

虽然可以取消统一您的代码，但它再也不一样了。首先，你所有有价值的评论都不见了。

这不是一个大问题，但是在编写代码时需要记住这一点。作为一个基本规则，未压缩的&gt；开发和压缩的&gt；生产。

现在你知道了关于缩小JavaScript的一切！缩小代码是压缩服务器性能的方法之一，所有大型网站都在这样做。

你用什么工具缩小你的代码？你有麻烦吗？请在下面的评论中告诉我们！

图片来源：NavinTar via Shutterstock