您的位置：首页 > Web前端 > CSS

mvc BundleConfig实现对Css、Js压缩打包加载

2017-04-13 10:57 183 查看
Bundle不是.net Framework框架中的一员，使用Bundle首先要先添加引用，如下：

nuget包管理--程序包管理控制台--Install-Package Microsoft.AspNet.Web.Optimization

1.App_Start添加BundleConfig.cs文件，当然你可以把如下直接写在Globle.aspx的Application_Start中

public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
//1.添加js
bundles.Add(new ScriptBundle("~/jsLayout")
.Include("~/...js")
.Include("~/...js"));
//2.添加css
bundles.Add(new StyleBundle("~/cssLayout")
.Include("~/...css")
.Include("~/...css"));

//3.启动css，js压缩
BundleTable.EnableOptimizations = true;
}
}


2.Globle.aspx的Application_Start引用

BundleConfig.RegisterBundles(BundleTable.Bundles);


3.修改View下的web.config中razor引擎配置，添加项System.Web.Optimization

<system.web.webPages.razor>
<host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.2.3.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<pages pageBaseType="System.Web.Mvc.WebViewPage">
<namespaces>
<add namespace="System.Web.Mvc" />
<add namespace="System.Web.Mvc.Ajax" />
<add namespace="System.Web.Mvc.Html" />
<add namespace="System.Web.Routing" />
<add namespace="System.Web.Optimization" />
<add namespace="FMMV.Web" />
</namespaces>
</pages>
</system.web.webPages.razor>


4.前台引用，我是在_Layout.chtml中引用，如下：

<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width" name="viewport">
<title>@ViewBag.Title</title>
@* 样式 *@
@Styles.Render("~/cssLayout");
@RenderSection("headResources", required: false)
</head>
<body>
@RenderBody()
@* 脚本*@
@Scripts.Render("~/jsLayout");
@RenderSection("footerResources", required: false)
</body>
</html>


5.个人页面调用Layout，比如Index.cshtml

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<!--本页面dom-->
<div>

</div>

<!--个人脚本放置位置-->
@section footerResources {
//只有本页面用到的js文件
<script src="~/xxx.js"></script>
//自定义js
<script>
$(function () {

});

</script>
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航