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

Question

我正在使用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。


我可以缩小此代码并将其发送到服务器吗？
我还能在其他压缩文件中使用上述属性吗？
（加分）这是传递仅在客户端使用的服务器端值的好方法吗？

Answer 1

第1部分

如果要在运行时生成js，则无法捆绑（至少不能有效捆绑）。您将不得不为每个请求创建一个新的捆绑包，这并不是很快。另外，您将无法缓存常规的，恒定的脚本包。

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

最小化服务器生成的js是完全可能的。 This question应该有您想要的答案。但是，我建议您在可能的情况下将其缓存在服务器上，因为缩小过程本身可能比直接发送多余的位所需的时间更长。

第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关键字声明变量很重要的原因之一，否则它们被认为是对全局变量的引用，不会被最小化。

另外，minifier绝不会扭曲JSON（不是Javascript对象文字！！！），因为它由所有键的字符串文字和所有非其他文字类型的值组成。

第三部分

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

Default.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端点，并仅在需要时才获取它们）。这样，当js注入到用户已经必须检索的页面上的script标签中时，您可以减少额外的HTTP调用。



但...

不要浪费太多时间担心它。这两种方法之间的差异几乎总是可以忽略的。如果出现问题，请尝试两者并根据情况使用更好的选项。