javascript - 如何像 Google Analytics 一样缩小 JavaScript？

Question

你们中的大多数人可能都熟悉 Google Analytics 提供的这个小跟踪代码。

<script>
(
    function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    }
)(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-00000000-0', 'auto');
ga('send', 'pageview');
</script>

有趣的是，这个小摘录包含构成单词 isogram 的参数。该脚本还使用参数来声明变量，以减少最终文件大小的一些位。可以说，您在编写代码时不会使用这种模式 (?)，所以我的问题是，Google 如何缩小其代码，这些技术是否也适用于凡人？

我在网上找到这个example由 Stephen Morley 编写，其中包含的代码看起来像是您在缩小之前编写的代码。我获取了该代码并通过 Google 自己的 Closure Compiler 运行它关于高级优化。正如预期的那样，生成的代码与 Google Analytics 使用的实际脚本完全不同。

(function(){window.b="ga";"ga"in window||(window.a=function(){window.a.q.push(arguments)},window.a.q=[]);window.a.c=(new Date).getTime();var c=document.createElement("script");c.src="//www.google-analytics.com/analytics.js";c.async=!0;var d=document.getElementsByTagName("script")[0];d.parentNode.insertBefore(c,d)})();

这一次，即使没有这两个额外的命令，代码也不那么枯燥，而且更大。

所以澄清一下，我很好奇 Google 工程师是如何得出上述结果的(我认为他们的代码实际上看起来不像 Stephen 示例中的代码)，即使您不是谷歌？提前致谢!

Answer 1

Google 很好，因为他们为我们提供了有关 https://developers.google.com 上很多事情的完整文档

您的许多回复都可以在 :

上找到

• Google analytics file

• Closure Compiler documentation

• Closure Compiler repository

这是未压缩的 Analytics.js

(function(i, s, o, g, r, a, m){
  i['GoogleAnalyticsObject'] = r; // Acts as a pointer to support renaming.

  // Creates an initial ga() function.
  // The queued commands will be executed once analytics.js loads.
  i[r] = i[r] || function() {
    (i[r].q = i[r].q || []).push(arguments)
  },

  // Sets the time (as an integer) this tag was executed.
  // Used for timing hits.
  i[r].l = 1 * new Date();

  // Insert the script tag asynchronously.
  // Inserts above current tag to prevent blocking in addition to using the
  // async attribute.
  a = s.createElement(o),
  m = s.getElementsByTagName(o)[0];
  a.async = 1;
  a.src = g;
  m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

// Creates a default tracker with automatic cookie domain configuration.
ga('create', 'UA-XXXXX-Y', 'auto');

// Sends a pageview hit from the tracker just created.
ga('send', 'pageview');

这是他们提供的缩小版(漂亮版):

(function (i, s, o, g, r, a, m) {
    i['GoogleAnalyticsObject'] = r;
    i[r] = i[r] || function () {
            (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date();
    a = s.createElement(o),
        m = s.getElementsByTagName(o)[0];
    a.async = 1;
    a.src = g;
    m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');

和here带有闭包编译器工具的缩小版

(function (a, e, f, g, b, c, d) {
    a.GoogleAnalyticsObject = b;
    a[b] = a[b] || function () {(a[b].q = a[b].q || []).push(arguments)};
    a[b].l = 1 * new Date;
    c = e.createElement(f);
    d = e.getElementsByTagName(f)[0];
    c.async = 1;
    c.src = g;
    d.parentNode.insertBefore(c, d)
})(window, document, "script", "//www.google-analytics.com/analytics.js", "ga");
ga("create", "UA-XXXXX-Y", "auto");
ga("send", "pageview");

看起来是一样的。
您可以在 Github repository 上找到有关该项目的更多详细信息。 .