javascript - 捆绑和最小化Durandal应用程序

Question

我正在使用MVC5 / Durandal，想知道 bundle /最小化durandal应用程序的推荐方法是什么。我已经看过有关使用Weyland的文档，但是将部署到Azure网站，并且在基于.net的部署过程中看不到如何利用它。部署到Azure时如何配置我的durandal应用程序的自动 bundle /最小化？

Answer 1

我花了一些时间尝试为荷兰最大的银行之一优化AngularJS应用程序。尽管它不是Durandal，但它仍然可以为您提供一些想法。

那么，我们用于 bundle 和最小化的是什么？来自ASP.NET MVC(来自system.web.optimization命名空间)的开箱即用的绑定(bind)和最小化

您需要采取一些措施才能利用此优势:

整理文件

以易于 bundle 的方式组织代码文件。 Web项目中的/app文件夹下有一个大树结构。就像是:

- App      
   |- Modules
   |     |-Common
   |     |    |- Directives
   |     |    |- Templates
   |     |    |- Filters
   |     --User
   |          ...
   | app.js

因此，应用程序框架位于app.js内，并且该应用程序需要所有其他JS文件。重点是:所有SPA代码都与供应商的Javscript文件分开，其余的当然

在 bundle 包配置中设置萌芽状态

现在轻而易举，只需从Global.asax.cs中进行常规旧式 bundle 即可:
确保Application_Start()中有一行:BundleConfig.RegisterBundles(BundleTable.Bundles);
这就调用了您的BundleConfig类，该类只需要1个包即可打包整个/app文件夹:

        bundles.Add(new ScriptBundle("~/bundles/app")
            .Include("~/app/*.js")
            .IncludeDirectory("~/app", "*.js", true));

我们需要先加载app.js-因此我们将其明确放在顶部。不用担心，它不会被要求两次。

对于 bundle -仅文件顺序很重要。但是，通过显式包含该文件，我们可以控制该文件，并且它像一个魅力一样工作。

缩小

现在为最小化，我们不得不进行一些代码更改。 AngularJS可以与不同类型的语法一起使用-其中一些语法可以缩小，而另一些则有问题。

例:

angular.module('myapp').controller(function($http,$scope) { ... });

无法缩小。压缩程序将更改$http的名称，使其更短一些，此后注入(inject)器将不再执行依赖项注入(inject)，因为它只知道称为$http和$scope的东西，而不知道最小化的变量名。

因此，对于Angular，您需要使用其他语法:

angular.module('myapp').controller(['$http', '$scope', function($http,$scope) { ... }]);

这样，注入(inject)器将知道函数的第一个参数是'$ http'，因为这是数组中的第一个字符串变量。好的，但是那是Angular，您正在寻找Durandal。

我听说Durandal使用AMD是吗？因此，在一个模块中，缩小应该不是问题，因为它应该足够聪明。但是，如果您使用的是外部设备，则要确保一切仍然正常。我读过here，您将要对AMD使用以下语法:

define("someModule", ["jquery", "ko"], function($,ko) { ... });

这样一来，我们减少了80％的请求，而Javascript有效负载的请求数几乎相同。

添加了AngularJS奖励

您可能对此并不感兴趣，但对其他读者而言可能如此。我们之所以没有减少99％的请求，是因为AngularJS使用了一种称为“指令”的东西。这些就像HTML模板。那些HTML模板每次使用时仍需要下载。

它们也包含在我们的/app文件夹中-因此我们必须在routeconfig中添加IgnoreRoute:

routes.IgnoreRoute("app/");

我用Google搜索，但找不到杜兰达尔的任何相似之处。因此，Angular将获取所有小的HTML文件，但首先将检查其$templatecache。如果HTML内容不在缓存中，则它将消失并下载并将其放置在缓存中，因此仅需下载一次。

我，我写了一个T4生成器，它输出一个JS文件，其中/ app文件夹中的所有HTML文件都添加到了$templatecache中。因此输出如下所示:

angular.module('myapp').run(function($templateCache) {
  /// For all *.html files in the /app folder and its children
  $templateCache.put('...filename...', '...content of html file ...');
});

由于此.JS文件位于/ app文件夹中，因此它将立即与应用程序 bundle 在一起，无需进行其他配置。这样，我们对整个应用程序的请求减少到了1个。由于HTML的数量非常少，因此，执行1个较大的请求，然后处理多个较小的请求似乎更快。

关键是:如果Durandal有一些相似之处，并且它将寻找一些模板，请找到缓存机制(因为它将拥有)并尝试利用它。

控制 bundle 和缩小

我将引用此网站:http://www.asp.net/mvc/overview/performance/bundling-and-minification

Bundling and minification is enabled or disabled by setting the value of the debug attribute in the compilation Element in the Web.config file. In the following XML, debug is set to true so bundling and minification is disabled.

<system.web>
    <compilation debug="true" />
</system.web>

因此，对于您的发行版-不应设置此标志，因此应该进行 bundle +缩小。
但是当然，您将需要在本地进行测试-您可以从web.config中删除它，也可以使用BundleTable.EnableOptimizations = true;覆盖它

部署到Azure

然后提到部署到Azure。我不知道这与部署到本地服务器有什么不同。我们使用了网络部署。 bundle 和最小化不会在构建时发生，因此构建过程不会发生任何变化。另外，优化框架也随站点一起部署-因此部署也没有困难。

不过，也许是一回事:您可以考虑为正在使用的库添加CDN:

bundles.Add(new ScriptBundle("~/bundles/jquery", "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js")

如果客户端的浏览器已经缓存了jQuery的CDN位置，则将保存另一个请求。

评估性能非常容易:只需在Chrome上打开“网络”标签，然后重新加载页面即可(确保未缓存)。检查请求总数和下载的数据总数。就像我说的:我们看到了巨大的进步。

好吧，希望它能对您有所帮助或为您指明正确的方向。