在 MVC 服务器端代码中动态创建和缩小 JavaScript ASP.NET

Creating and minifying JavaScript dynamically in ASP.NET MVC server-side code

本文关键字：缩小 JavaScript ASP NET 创建 动态 MVC 服务器端 代码      更新时间：2023-09-26

我正在使用 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. （奖励积分）传递要在客户端使用的仅限服务器端的值是否是一个很好的方法？
第

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 在脚本标记中呈现服务器值。即

默认.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被注入到用户已经必须检索的页面上的脚本标签中。

但。。。

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

相关文章：