0

我正在使用 ASP.NET 路由（拦截对 .js 的调用）和控制器来生成一些我想在客户端上使用的 JS。我这样做的原因是为了不必在客户端上复制 id 或常量。这是我的 JS 的输出：

app.serviceRootURL = 'http://localhost:65211/';  // set in my web.config
app.ajaxResponseStatuses = [
    { "status":"Success", "id":0 },              // set in my C# DTO
    { "status":"Failure", "id":1 },
];

首先，我不确定这是否是最好的方法，所以其他建议这样做会是有益的。

更重要的是，我想知道如何捆绑和缩小它。据我了解，即使我可以在编译或运行时缩小 JS，缩小也会改变我的变量的名称。因此，在上面的 JS 中，app.ajaxResponseStatuses可以更改为a.bc，然后在我尝试访问该变量的实际 JS 文件中，他们可能正在寻找x.yz.

  1. 我可以缩小此代码并将其发送到服务器吗？
  2. 我仍然可以在其他缩小文件中使用上述属性吗？
  3. （奖励积分）这是传递仅用于客户端的服务器端值的好方法吗？
4

1 回答 1

1

第1部分

如果您在运行时生成 js，则无法进行捆绑（至少效率不高）。您必须为每个请求创建一个新的捆绑包，这不是非常快。另外，您将无法缓存常规的常量脚本包。

编辑：虽然捆绑服务器生成的 js 是不切实际的，但将值呈现到页面中的脚本标记中可以获得与捆绑相同的好处，更少的 HTTP 调用。有关更多信息，请参阅第 3 部分中的编辑。

然而，缩小服务器生成的 js 是完全可能的。这个问题应该有你要找的答案。但是，如果可能，我建议您将其缓存在服务器上，因为缩小过程本身可能比简单地发送额外的位要花费更长的时间。

第2部分

在大多数压缩器中，全局变量（window对象上可访问的变量）在名称修改期间被跳过。同样，在该文件中未定义的其他文件中访问的变量不会被重命名。

例如，如果您有以下文件...

// outside of a closure, so globally accessible
var foo = 1;

function bar() {
  // within a closure, and defined with `var`, not globally accessible
  var bar;

  // reference to variable declared in another file
  baz = null;
}

它将被缩小如下（包含空格以提高可读性

var foo = 1;

function bar() {
  var b;

  baz = null;
}

这是始终使用var关键字声明变量很重要的原因之一，否则它们被假定为对全局变量的引用并且不会被缩小。

此外，JSON（不是 Javascript 对象文字！！！）永远不会被压缩器扭曲，因为它由所有键的字符串文字和所有不属于其他文字类型的值组成。

第 3 部分

不错的方法，在我的工作中，我们确实使用了这种方法。不过，对于小文件或简单的配置值，我们已经过渡到在实际视图中使用 ASP.NET 在脚本标记中呈现服务器值。IE

默认.aspx

<script> window.globals = <%= JsonConvert.SerializeObject(new AppGlobals(currentUser)) %>; </script>

我们将其撕成代码，但前提是相同的。

编辑：

服务器生成的 JS（在它自己的 uri 中）

  • 优点

    • 可由浏览器缓存（如果每个请求都不需要新值）

  • 缺点

    • 额外往返

  • 在以下情况下使用：

    • 您生成的文件很大，但对于多个用户来说很少更改或相同。这些脚本可以被视为与其他静态资产相同。举个例子，我们提供一个 js 文件，其中包含我们应用程序中的所有文本，用于本地化目的。我们可以根据用户设置中设置的语言提供不同的 js 文件，但是这些值在每次发布时最多只更改一次，因此我们可以设置积极的缓存头并在 uri 中使用哈希，以及查询字符串语言环境，利用浏览器缓存并为每个客户端下载每个语言文件一次。另外，如果这个文件对于每个访问相同 uri 的用户来说都是相同的，那么您可以将它缓存在 Web 服务器（IIS、Apache 等）上。
      前任：/api/language.v1-0-0.js?locale=en

    • 您的 js 独立于应用程序的其余部分，没有它不会延迟渲染。在这种情况下，您可以将async属性添加到您的脚本标签中，该文件将被异步下载并在收到时执行，而不会阻止其他javascript的执行。

服务器渲染的 JS（在script标签中的页面内）

  • 优点

    • 没有额外的 HTTP 调用

  • 缺点

    • 可以为您的 HTML 添加额外的权重，根据您的情况，可能无法缓存或缩小

  • 在以下情况下使用：

    • 你的价值观经常改变。除非您有大量值，否则添加到页面的权重应该可以忽略不计（在这种情况下，您可能会考虑将它们拆分并为这些值添加 API 端点，并且仅在需要时获取它们）。有了这个，您可以减少额外的 HTTP 调用，因为 js 被注入到用户已经必须检索的页面上的脚本标记中。

但...

不要浪费太多时间担心它。这两种方法的差异几​​乎总是可以忽略不计。如果它成为问题，请尝试两者并为您的情况使用更好的选择。

于 2015-04-01T04:59:38.690 回答