JavaScript压缩器：如何以及为什么最小化JS

我们都曾到过那里，您学习了如何构建一个很棒的网站，但是一旦发布，它的运行速度简直令人难以忍受。

缩小javascript是加快网站响应速度的一种方法（以及压缩HTML），幸运的是，这是一个简单的过程。今天，我将向您展示您需要了解的所有信息。

缩小意味着什么？

缩小（或缩小）是一个简单的概念。当您使用JavaScript或任何其他语言编写代码时，只有许多功能才需要使代码更易于人类理解-计算机不在乎您所说的变量是什么，也不在乎括号之间有多少间距，对于

通过压缩代码，您可以大大减小其文件大小。因此，较小的文件将使您的用户更快地下载。如果您只编写一两行JavaScript，则可能不会有明显的改进。但是，如果您要编写大量代码或使用诸如jQuery之类的大型库，则可以轻松实现显着的性能提高和文件大小的显着减小！

如果从外部CDN加载代码，例如在Google托管库中，您已经使用了缩略代码。

缩略代码看起来像什么？

让我们看一些示例。很难看到最小化对小型代码库的影响，因此我对它们的长篇幅表示歉意。

在我们的JSON与Python和Python结合使用指南中，有一些 unminified JavaScript。 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(){    console.log('YAY, it is finished');});

这是压缩后的代码： 

function doThing(){return $.get("some/slow/url",function(){dfd.resolve()}),dfd.promise()}var dfd=$.Deferred();$.when(doThing()).then(function(){console.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 MB> 201 KB
  • jQuery：270 KB> 90 KB
  • MooTools：164 KB> 93 KB

    • 其中一些库在压缩后显示出明显的大小减小（〜80％），而其他人则不太好（〜40％）。也就是说，任何节省都可以使您的网站更快地为用户服务，并减轻Web服务器的负担。

    如何缩小规模？

    现在，您知道它的工作原理和作用看起来，让我们深入研究如何做。不用担心，根本不需要手动修改您的代码！有许多免费工具可以为您处理该过程。

    这些工具可以通过多种方式工作。大多数在线工具都允许您复制和粘贴代码，然后代码将对其进行处理并在页面上返回给您。这些工具通常还可以让您上传多个文件。

    下面是在线工具的简要介绍。它们的工作原理大致相同，因此您不必为选择哪一个担心。

    JSCompress-我个人最常使用此网站，因为它只是一项快速的工作。它运行起来很快，甚至可以向您展示他们用来构建它的工具。

    JavaScript Minifier-这个工具很好用，但它确实可以作为一种API发挥作用。这样一来，您就可以在其现有网站的顶部构建自己的集成或服务。

    JavaScript Minifier-另一个具有相同名称的网站，此工具非常简单。没有选项或菜单，只有一个按钮。

    缩小-这个网站看起来很棒，开发人员显然已经注意到这里的细节。

    此列表可能永远存在。 。用于缩小网站规模的在线工具太多了，很难出错。

    缩小工具也可以作为命令行工具或JavaScript编辑器的插件来使用。这些工具通常使用起来速度更快，并且可以与您现有的代码“兼容"。无需复制和粘贴，也不必从可能位于同一文件中的任何HTML或CSS中提取JavaScript。

    如果您使用的是Microsoft Visual Studio，则Bundler和市场上的Minifier扩展安装量超过60万！不仅如此，它还会定期更新并在GitHub上可用。

    如果您像我一样是Sublime Text的粉丝，那么Minify软件包就是您想要的软件包。安装了61,000多个软件包，这是一个非常受欢迎的软件包，如果您希望为一个开源项目做出贡献，它也可以在GitHub上获得。

    Finally, if you’re a PyCharm user, you can configure it to integrate directly with many common compression tools such as YUI compressor. Many of these tools directly power the online tools listed above.

    注意事项

    那里>有是赶上权利吗？没有任何事情是完美的。好吧，是的，这里有一个问题，但是它很小，可以很容易地解决：

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

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

    虽然可以使代码最小化，但绝不可能完全相同再次。一方面，您所有有价值的注释都丢失了。

    这不是一个大问题，但是在编码时需要牢记这一点。作为基本规则，未压缩>开发和压缩>生产。

    现在，您已经知道了压缩JavaScript的全部知识！压缩代码是降低服务器性能的一种方法，而所有大型网站都在这样做。

    您使用什么工具来压缩代码？你还要打扰吗在下面的评论中让我们知道！

    图片来源：通过Shutterstock的NavinTar

    标签: Java JavaScript 网页设计