没有ASP的捆绑和缩小.净MVC

本文关键字：缩小 MVC ASP 没有 | 更新日期: 2023-09-27 17:49:34

是否可以在没有MVC项目的情况下使用microsoft . asp.net . web . optimization中的捆绑和最小化?

我正在创建一个与REST API通信的AngularJS站点。对于REST API，我使用ASP。. NET Web API。我还创建了一个"ASP。. NET空Web应用程序"。在这个项目中只有HTML, js和CSS文件(和一个web.config)。我想我的js和CSS文件被捆绑和缩小，但我不想创建一个MVC项目只是为了得到。这可能吗?

没有ASP的捆绑和缩小.净MVC

在空白项目中使用捆绑和缩小是完全可能的。

  1. 使用Nuget安装包:Install-Package Microsoft.AspNet.Web.Optimization

  2. 创建一个bundlecconfig类并定义你的bundle:

    using System.Web.Optimization;
public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/js").Include(
                  "~/Scripts/*.js"));
        bundles.Add(new StyleBundle("~/bundles/css").Include(
                   "~/Styles/*.css")); 
    } 
}

  3. 将bundlecconfig类注册到应用程序的global.asax

    void Application_Start(object sender, EventArgs e)
{
    BundleConfig.RegisterBundles(BundleTable.Bundles);
}
  4. 在你的HTML文档中引用bundle。
  5. 通过禁用调试模式启用绑定。

除了上面给出的答案，我还想提一下，有一个重要的步骤被忘记了:

在为Microsoft.AspNet.Web.Optimization安装了NuGet包并在Global. exe中注册了bundle之后。asax(正如claes回答中解释的那样)，您需要为样式和脚本添加如下的呈现方法:

<%= Styles.Render("~/bundles/css") %>
<%= Scripts.Render("~/bundles/MattsUIBundle/js") %>

这需要添加到ASPX页面的头部部分，以便渲染之前添加到页面中的"~/bundles/js"answers"~/bundles/css"。如果没有渲染，它将不会出现(参见为什么我需要渲染?)。它要求你添加

<%@ Import Namespace="System.Web.Optimization" %>

到页面的第2行，以便注册名称空间，假设您已经在代码中添加了NUGET包Microsoft.AspNet.Web.Optimization。

如果你想包含更多的相关文件，像

void Application_Start()
{
    BundleCollection bundles=BundleTable.Bundles;
    var jsMattsUIBundle = new ScriptBundle("~/bundles/MattsUIBundle/js");
    jsMattsBundle.Include("~/Scripts/lib/jquery.min.js");
    jsMattsBundle.Include("~/Scripts/lib/jquery-ui.custom.min.js");
    jsMattsBundle.Include("~/Scripts/lib/jquery.watermark.min.js");
    bundles.Add(jsMattsBundle);
}

或更简单的

    jsMattsBundle.Include("~/Scripts/lib/jquery.min.js",
            "~/Scripts/lib/jquery-ui.custom.min.js",
            "~/Scripts/lib/jquery.watermark.min.js");

将在虚拟路径"~/bundles/MattsUIBundle/js"下捆绑所有3个脚本。

重要提示: bundle将检查您是在调试模式还是发布模式。优化只适用于删除web.config

中的调试标志。
<compilation debug="true" />

或者如果您在Application_Start中显式定义，则无论在调试模式下都希望进行优化:

BundleTable.EnableOptimizations = true;
同样，如果你使用的是CDN支持，通过 打开它
BundleTable.Bundles.UseCdn = true;   //enable CDN support

允许你声明

var jqueryCdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js";
BundleTable.Bundles.Add(new ScriptBundle("~/bundles/jquery",
            jqueryCdnPath).Include("~/Scripts/jquery-{version}.js"));

注意 CDN只在发布模式下使用。下面的脚本确保在CDN加载失败时加载jQuery的本地副本:

    <%= Scripts.Render("~/bundles/jquery") %>
    <script type="text/javascript">
        if (typeof jQuery == 'undefined') {
            var e = document.createElement('script');
            e.src = '@Url.Content("~/Scripts/jquery-1.7.1.js")';
            e.type = 'text/javascript';
            document.getElementsByTagName("head")[0].appendChild(e);
        }
    </script>

假设您在"~/Scripts"提供了jQuery 1.7.1的本地副本。

注意:在MVC Razor语法渲染是在视图中完成如下:

@Scripts.Render("~/bundles/MattsUIBundle/js") 
@Styles.Render("~/bundles/css")

更多信息可以在这里找到。

@Matt，实际上你不需要添加

<%@ Import Namespace="System.Web.Optimization" %>
<%= Styles.Render("~/bundles/css") %>
<%= Scripts.Render("~/bundles/MattsUIBundle/js") %>

你不需要使用CSHTML-template。你可以这样从html页面引用你的bundle:

<link href="bundles/css" rel="stylesheet"/>
<script src="bundles/MattsUIBundle/js"></script>

它将保存您的页面从视图引擎。

要在SPA中获得文件加载速度，您需要手动设置时间。错误的答案是实现Razor，特别是如果你的整个目标是远离MVC和它的朋友(如果你的目标是AngularJS SPA，这是一件好事)。当你实现在其他答案中提到的优化框架时，你现在必须点击视图引擎来构建CSHTML文件，这对你的速度是一个明显的打击，可能比你认为你节省的还要多。

所以就像我说的，你需要开发人员的时间来最小化文件。您必须手动将它们发送到您自己(或需要设置)的CDN。然后你可以用你自己的包来引用你自己的CDN，这个CDN将被用户的浏览器缓存。

然后，当一个或多个SPA需要指向更新的HTML/CSS/JS时，您可以在SPA应用程序中增加CDN版本。其他SPA应用程序甚至可以与旧版本保持相同(尽管我建议尝试坚持使用最新版本的CDN)。用户的浏览器会识别新的CDN版本，并将新版本拉到缓存中。

您可以使用YUI或Google Clouser Mapper

这是如何在Visual Studio

中使用YUI的示例http://peronnemyr.wordpress.com/2012/09/26/using-yui-compressor-for-net-integrated-to-builds-in-visual-studio-2010/

这个链接有Visual Studio扩展http://visualstudiogallery.msdn.microsoft.com/5469b7e2 - 90 d7 - 4 - f54 b299 ae47e26323e6

您可以使用JSMINhttp://www.crockford.com/javascript/jsmin.html

您可以像下面这样将JsMin作为Post Build Event运行个& lt;"$()管理扫描' debug.js "> " $()管理扫描' min.js "

是运行JSMIN的链接http://jasonfaulkner.com/RunJSMinInVisualStudio.aspx

如果这回答了你的问题，请在左边的右边打勾。

你也可以使用VS扩展WebEssentials minification，它可以从项目编译中独立地缩小你的js/css文件(这样你就不需要任何第三方dll依赖)。它也有捆绑，非常方便。

相关文章：