标签: web-optimization

我们在我们的站点中使用MVC Bundling,CssRewriteUrlTransform确保图像URL在动态bundle css文件中工作.

但这只适用于不使用虚拟目录的情况,即

http://localhost/VirttualDir不行,但http://localhost/确实如此.这是因为CssRewriteUrlTransform在重写URL时,转换不会考虑虚拟文件夹.因此,如果图像真实路径是localhost/vdir/content/img/foo.png它将重写它localhost/content/img/foo.png是错误的

我最近浏览了我的CSS文件并将所有6位十六进制代码切换为简单的3位代码(例如,我#FDFEFF缩短为#FFF).它渲染的颜色几乎与以前完全相同,在我看来,部件之间相当无用,删除它们在我的CSS文件中保存了整整300个字节.

你使用哪个版本是否重要？我很少遇到只使用3位代码的网站(或者我想我从来没有碰过那些代码的网站).在6位代码上使用3位代码仍然完全有效,或者我们是否应该使用完整的6位代码？

我刚刚在VS 2013 RTM上创建了一个新的MVC 5应用程序.出于某种原因,我的CSS文件中的背景图片网址没有被转换.

因此,为了调试该问题,我创建了自定义CssRewriteUrlTransform包装器.我发现我的断点没有被调用.

这就是我在BundleConfig.cs中的内容

using System.Web.Optimization;

namespace Utilities.Web
{
    public class BundleConfig
    {
        private const string JQUERY_CDN_URL = "//code.jquery.com/jquery-1.10.1.min.js";

        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.UseCdn = true;
            BundleTable.EnableOptimizations = true;

            bundles.Add(new StyleBundle("~/css/coming-soon")
                .Include("~/Content/Site/coming-soon.css",
                    new CssRewriteUrlTransformWrapper()));

            bundles.Add(new ScriptBundle("~/js/coming-soon")
                .Include("~/Scripts/jquery.placeholder.js")
                .Include("~/Scripts/Site/coming-soon.js"));

            bundles.Add(new ScriptBundle("~/js/jquery", JQUERY_CDN_URL)
            {
                CdnFallbackExpression = "window.jQuery"
            }.Include("~/Scripts/jquery-{version}.js"));
        }
    }

    public class CssRewriteUrlTransformWrapper : IItemTransform
    {
        public string Process(string includedVirtualPath, string input)
        {
            return new CssRewriteUrlTransform().Process(includedVirtualPath, input);
        }
    }
}

在Visual Studio 13的ASP.Net Web表单的默认模板中,有一个标签webopt:

<webopt:bundlereference runat="server" path="~/Content/css" />

搜索后,似乎是捆绑和缩小.标签有官方文档吗？我找不到一个.具体来说我想知道,它是如何工作的？如果Content文件夹中已存在缩小文件,则它将获取该文件.我该如何改变这种行为？路径值如何转换,因为Content文件夹中没有文件夹css？

我正试图想出加快我的安全网站的方法.因为需要加载很多CSS映像,所以它可能会降低站点的速度,因为浏览器不会将安全资源缓存到磁盘,并且必须比实际需要更频繁地检索它们.

我考虑的一件事可能是将基于样式的图像和javascript库移动到非安全的子域,以便浏览器可以缓存这些不会带来安全风险的资源(渐变不是完全敏感的材料).

我想看看别人怎么想做这样的事情.这是一个可行的想法,还是应该以其他方式优化我的网站,比如使用CSS sprite-maps等来减少请求和带宽？

我试图在一个请求中捆绑jQueryUI.

Global.asax中:

var cssjQuery = new StyleBundle("~/Content/BundleCSS/jQuery");
cssjQuery.IncludeDirectory("~/Content/themes/base", "*.css");

布局:

<link href="@Styles.Url("~/Content/BundleCSS/jQuery")" rel="stylesheet" type="text/css" />

文件夹结构:

• CSS文件: Content/themes/base/*.cs
• 图像文件:内容/主题/基础/图像/*.png

现在的问题是无法加载图像,因为没有文件夹"BundleCSS":

http://localhost:64648/Content/BundleCSS/images/ui-bg_flat_75_ffffff_40x100.png

我该如何解决这个问题？

我是我的应用程序的ASP.NET MVC v4,我正在使用Web优化功能(脚本和样式的捆绑和缩小).

现在,我理解的是(如果错误请纠正我),优化框架将在编译时查看包含的文件并进行配置.它将根据内容创建版本号(v = something).每次内容更改时,它都会重新创建版本哈希,客户端将获得更新的文件.

现在,有没有办法完成以下任务

[1]更新我服务器中js文件中的内容,并将更新后的内容提供给客户端,而无需重新构建和重新启动应用程序(我不是在这里更改捆绑配置,只是更新脚本中的文件内容)？

[2]更新脚本配置本身(例如,向捆绑包添加新脚本),并将其提供给客户端,而无需重新编译和重新启动应用程序？或者,至少没有重新编译？(我知道,通常我们在cs文件中定义包,但想知道是否有出路!)

[3]有没有办法使用我自己的版本号(比如来自配置文件,v = myCustomScriptVersion)而不是自动生成的版本哈希？

我有一个superfish jquery插件,它有4个js和1个css:

<script src="~/Scripts/JQ_Addons/SuperFish/jquery.bgiframe.min.js"></script>
<script src="~/Scripts/JQ_Addons/SuperFish/hoverIntent.js"></script>
<script src="~/Scripts/JQ_Addons/SuperFish/supersubs.js"></script>
<script src="~/Scripts/JQ_Addons/SuperFish/superfish.js"></script>
<link href="~/Scripts/JQ_Addons/SuperFish/superfish.css" rel="stylesheet" />

我想为所有这些创建一个包,但是当我调用bundles.Add()时,它只能添加一种类型的包,ScriptBundle或者StyleBundle.

bundles.Add(new ScriptBundle("~/bundles/superfish").Include(
            "~/Scripts/JQ_Addons/SuperFish/jquery.bgiframe.min.js",
            "~/Scripts/JQ_Addons/SuperFish/hoverIntent.js",
            "~/Scripts/JQ_Addons/SuperFish/supersubs.js",
            "~/Scripts/JQ_Addons/SuperFish/superfish.js")); // I can not add css here

在视图中,我只能选择渲染一种类型的包:

@Styles.Render or @Script.Render

所以,我的问题是:是否可以只创建一个包含js和css的捆绑规则？在我看来,我想要的东西:

@Bundles.Render("~/bundles/superfish")

我正在开发一个MVC4应用程序,我正在使用WebOptimization来完成所有资源处理(cat和min).我有一些非常相似的页面,但是逐页需要一些不同的样式.

所以,我试图在另一个包(页面特定样式)中引用一个包(基本样式),我没有太多运气.这是我在捆绑配置中的内容:

bundles.Add(new StyleBundle("~/bundles/css/search").Include(
  "~/Content/css/partials/grid-controls.css",
  "~/Content/css/partials/grid.css",
  "~/Content/css/views/search.css"));

bundles.Add(new StyleBundle("~/bundles/css/searchtrees").Include(
  "~/bundles/css/search",
  "~/Content/css/views/search/trees.css"));

在搜索树页面上,我得到了trees.css,但没有来自基本搜索CSS包.

如何在第二个包中引用第一个包？我确定有一种方法,只是不太熟悉捆绑.

有没有办法可以用ASP.NET以编程方式在代码中设置Expires Header？具体来说,我需要将它设置在整个文件夹和所有子文件夹上,并且该文件夹仅包含静态文件(JavaScript,CSS,图像等)而不包含aspx文件,因此我不能只将一些代码添加到aspx代码中-behind page_load.

我通常可以直接在IIS中设置它.但服务器被客户端锁定(我只有FTP访问Web应用程序目录进行部署),并且让客户端在IIS上设置Expires Header将需要一个冰河时代(它是一个公共部门/政府网站).

我按照雅虎的建议http://developer.yahoo.com/performance/rules.html#expires进行前端优化的原因

更新:我试过创建一个HttpModule ......

public class FarFutureExpiresModule : IHttpModule
{
    public void Dispose() { }

    public void Init(HttpApplication context)
    {
        context.BeginRequest += new EventHandler(context_BeginRequest);
    }

    void context_BeginRequest(object sender, EventArgs e)
    {
        HttpContext context = HttpContext.Current;

        string url = context.Request.Url.ToString();

        if (url.Contains("/StaticContent/"))
        {
            context.Response.Cache.SetExpires(DateTime.Now.AddYears(30));
        }
    }
}

虽然这看起来不起作用.我在代码上放置了一个断点,它可以正常运行.但是,当我在Firefox中分析原始HTTP标头信息时,未设置过期值.请注意我正在使用BeginRequest,但我也尝试连接到PostReleaseRequestState和PreSendRequestHeaders,它们似乎也不起作用.有任何想法吗？

更新2:好的,所以看起来因为我正在运行IIS6,HttpModules不会运行静态文件,只运行动态文件(*.aspx等).感谢RickNZ的帮助,我提出了以下IHttpModule:

public class FarFutureExpiresModule : IHttpModule
{
    public void Dispose() { }

    public void Init(HttpApplication context)
    {
        context.BeginRequest += new EventHandler(context_BeginRequest);
    }

    void context_BeginRequest(object sender, …