Оптимизация ASP.NET - объединение
Я тестировал новую функцию минимизации и связывания в ASP.NET MVC 4, и она отлично работает, пока вы используете соглашения о папке по умолчанию для файлов css и js.
/Content
/Scripts
Обычно я помещаю css и script в папку Static, подобную этой
/Static/Css
/Static/Js
Я попытался зарегистрировать свои собственные пакеты следующим образом:
public static class BundleCollectionExtensions
{
public static void RegisterScriptsAndCss(this BundleCollection bundles)
{
var bootstrapCss = new Bundle("~/Static/Css", new CssMinify());
bootstrapCss.AddDirectory("~/Static/Css", "*.css");
bootstrapCss.AddFile("~/Static/Css/MvcValidation.css");
bootstrapCss.AddFile("~/Static/Css/bootstrap-responsive.min.css");
bootstrapCss.AddFile("~/Static/Css/bootstrap.min.css");
bundles.Add(bootstrapCss);
var bootstrapJs = new Bundle("~/Static/Js", new JsMinify());
bootstrapJs.AddDirectory("~/Static/Js", "*.js");
bootstrapJs.AddFile("~/Static/Js/jquery-1.7.1.min.js");
bootstrapJs.AddFile("~/Static/Js/jquery.validate.min.js");
bootstrapJs.AddFile("~/Static/Js/jquery.validate.unobtrusive.min.js");
bootstrapJs.AddFile("~/Static/Js/bootstrap.min.js");
bootstrapJs.AddFile("~/Static/Js/gunsforhire.js");
bundles.Add(bootstrapJs);
}
}
И в
Global.ascx.cs
Я сделал это:
BundleTable.Bundles.RegisterScriptsAndCss();
Сгенерированная разметка выглядит следующим образом:
<link href="/Static/Css?v=D9JdmLZFFwjRwraNKfA1uei_YMoBoqLf-gFc0zHivM41" rel="stylesheet" type="text/css" />
<script src="/Static/Js?v=mbKbf5__802kj-2LS5j9Ba-wvSxBCKNMQGBgzou6iZs1" type="text/javascript"></script>
Однако это не работает, запрос выглядит так:
Request URL:http://localhost:49603/Static/Js?v=mbKbf5__802kj-2LS5j9Ba-wvSxBCKNMQGBgzou6iZs1
Request Method:GET
Status Code:301 Moved Permanently (from cache)
Query String Parametersview URL encoded
v:mbKbf5__802kj-2LS5j9Ba-wvSxBCKNMQGBgzou6iZs1
Request URL:http://localhost:49603/Static/Js/?v=mbKbf5__802kj-2LS5j9Ba-wvSxBCKNMQGBgzou6iZs1
Request Method:GET
Status Code:404 Not Found
Request Headersview source
Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Host:localhost:49603
Referer:http://localhost:49603/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.56 Safari/535.11
Query String Parametersview URL encoded
v:mbKbf5__802kj-2LS5j9Ba-wvSxBCKNMQGBgzou6iZs1
Response Headersview source
Cache-Control:private
Content-Length:4757
Content-Type:text/html; charset=utf-8
Date:Thu, 01 Mar 2012 19:05:44 GMT
Server:Microsoft-IIS/7.5
X-Powered-By:ASP.NET
X-SourceFiles:=?UTF-8?B? QzpcQENvZGVccGVsbGVccGVsbGVoZW5yaWtzc29uLnNlXHNyY1xXZWJcU3RhdGljXEpzXA==?=
Что я делаю неправильно?
Обновление
Я думаю, что, наконец, я смог решить эту проблему, выполнив следующие действия:
-
Удаление вызовов AddDirectory bootstrapCss.AddDirectory("~/Static/Css", "*.css");
-
Предоставление путей пакетов, которые не отражают реальную структуру каталогов
Ответы
Ответ 1
То, что вы делаете "неправильно", заключается в том, что ваш путь пакета соответствует REAL-пути. Как я понимаю, когда приходит запрос для "/Static/Css? V = D9JdmLZFFwjRwraNKfA1uei_YMoBoqLf-gFc0zHivM41", механизм маршрутизации сначала ищет физический путь. Он находит совпадение с вашей папкой "static" и пытается найти в нем файл, который соответствует "Css? V = D9JdmLZFFwjRwraNKfA1uei_YMoBoqLf-gFc0zHivM41". Когда он не может найти его, потому что он не существует, он дает 404. (Я также видел отказ в доступе.) Когда механизм маршрутизации не может найти путь к физическому файлу, он смотрит на другие обработчики, такие как связывание и минимизация для подачи запроса.
В любом случае, я думаю, вы поняли это из своих комментариев, но я не уверен, что это будет очень понятно любому, кто найдет ваш вопрос. Просто измените свою регистрацию на:
var bootstrapCss = new Bundle("~/Static/Css", new CssMinify());
в
var bootstrapCss = new Bundle("~/bundles/Css", new CssMinify());
Если вы внесете это изменение, ваша проблема исчезнет (если нет физического пути, который соответствует "связки".
Ответ 2
если сделать это несколько дней назад, и это сработало хорошо. Я создал папку с именем Helper
, а затем создал новый класс под названием CssJsBuilder
.
мой класс выглядит следующим образом:
public static void Initializing()
{
IBundleTransform jstransformer;
IBundleTransform csstransformer;
#if DEBUG
jstransformer = new NoTransform("text/javascript");
csstransformer = new NoTransform("text/css");
#else
jstransformer = new JsMinify();
csstransformer = new CssMinify();
#endif
var bundle = new Bundle("~/Scripts/js", jstransformer);
bundle.AddFile("~/Scripts/jquery-1.6.2.js", true);
bundle.AddFile("~/Scripts/jquery-ui-1.8.11.js", true);
bundle.AddFile("~/Scripts/jquery.validate.unobtrusive.js", true);
bundle.AddFile("~/Scripts/jquery.unobtrusive-ajax.js", true);
bundle.AddFile("~/Scripts/jquery.validate.js", true);
bundle.AddFile("~/Scripts/modernizr-2.0.6-development-only.js", true);
bundle.AddFile("~/Scripts/AjaxLogin.js", true);
bundle.AddFile("~/Scripts/knockout-2.0.0.debug.js", true);
bundle.AddFile("~/Scripts/bootstrap.js", true);
bundle.AddFile("~/Scripts/dungeon.custom.js", true);
BundleTable.Bundles.Add(bundle);
bundle = new Bundle("~/Content/css", csstransformer);
bundle.AddFile("~/Content/bootstrap-responsive.css", true);
bundle.AddFile("~/Content/bootstrap.css", true);
BundleTable.Bundles.Add(bundle);
bundle = new Bundle("~/Content/themes/base/css", csstransformer);
bundle.AddFile("~/Content/themes/base/jquery.ui.core.css", true);
bundle.AddFile("~/Content/themes/base/jquery.ui.resizable.css", true);
bundle.AddFile("~/Content/themes/base/jquery.ui.selectable.css", true);
bundle.AddFile("~/Content/themes/base/jquery.ui.accordion.css", true);
bundle.AddFile("~/Content/themes/base/jquery.ui.autocomplete.css", true);
bundle.AddFile("~/Content/themes/base/jquery.ui.button.css", true);
bundle.AddFile("~/Content/themes/base/jquery.ui.dialog.css", true);
bundle.AddFile("~/Content/themes/base/jquery.ui.slider.css", true);
bundle.AddFile("~/Content/themes/base/jquery.ui.tabs.css", true);
bundle.AddFile("~/Content/themes/base/jquery.ui.datepicker.css", true);
bundle.AddFile("~/Content/themes/base/jquery.ui.progressbar.css", true);
bundle.AddFile("~/Content/themes/base/jquery.ui.theme.css", true);
BundleTable.Bundles.Add(bundle);
}
После этого. Перейдите к Global.asax
:
- Удалить или прокомментировать
BundleTable.Bundles.RegisterTemplateBundles()
- Добавьте
CssJsBuilder.Initializing()
в метод Application_Start()
.
- Восстановите проект, а затем запустите его снова.
Надеюсь, это сработает и для вас.
Ответ 3
В Global.asax.cs заменить
BundleTable.Bundles.RegisterTemplateBundles();
с
BundleTable.Bundles.EnableDefaultBundles();
Ответ 4
Вот как это сработало для меня.
Это упрощенная версия. Я использую default.aspx файл no global.asax(вы можете нам это сделать, если хотите)
В этом примере я использую 2 каталога Content2 и Scripts2
в Content2 У меня есть 2 файла css для class= "naziv", а для class= "naziv2"
в Scripts2 есть 2 файла с определением функции f1() и другим с определением f2()
в каталоге /bin должно быть 3 файла:
Microsoft.Web.Infrastructure.dll,
System.Web.Optimization.dll,
WebGrease.dll
<%@ Page Title="Home Page" Language="vb" debug="true"%>
<%@ Import namespace="System.Web.Optimization" %>
<script runat="server" >
Sub Page_Load(sender As Object, e As EventArgs)
System.Web.Optimization.BundleTable.EnableOptimizations = True ''true will force optimization even if debug=true
Dim siteCssBundle = New StyleBundle("~/Content2/css")
siteCssBundle.IncludeDirectory("~/Content2", "*.css")
BundleTable.Bundles.Add(siteCssBundle)
Dim siteJsBundle = New ScriptBundle("~/Scripts2/js")
siteJsBundle.IncludeDirectory("~/Scripts2", "*.js")
BundleTable.Bundles.Add(siteJsBundle)
End Sub
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body onload="f1(); f2();">
<%: Styles.Render("~/Content2/css")%>
<%: Scripts.Render("~/Scripts2/js")%>
<br />
<span class="naziv">Span 1</span> <br />
<span class="naziv2">Span 2</span> <br />
</body>
</html>