mvc BundleConfig实现对Css、Js压缩打包加载
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>
}
mvc BundleConfig实现对Css、Js压缩打包加载的更多相关文章
- 用 Flask 来写个轻博客 (28) — 使用 Flask-Assets 压缩 CSS/JS 提升网页加载速度
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 Flask-Assets 将 Flask-Assets 应用 ...
- 对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析
来自 https://blog.csdn.net/u011088260/article/details/79563315 最近在研究HTML页面中JavaScript的执行顺序问题.在Java ...
- webpack配置:css文件打包、JS压缩打包和HTML文件发布
一.CSS文件打包 1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ color:red; font-size:20px; } 2.css建立好后,需要 ...
- r.js压缩打包(require + backbone)项目开发文件
最近项目稳定了一点,之前一直没空关注的开发文件压缩打包问题也有时间来解决了 AMD模块化开发中的代码压缩打包工具——r.js 环境搭建基于nodejs:用于AMD模块化开发中的项目文件压缩打包,不是A ...
- r.js压缩打包
AMD模块化开发中的代码压缩打包工具——r.js 环境搭建基于nodejs:用于AMD模块化开发中的项目文件压缩打包,不是AMD模式也是可以的 javascript部分 压缩javascript项目开 ...
- 性能优化之html、css、js三者的加载顺序
前言 我们知道一个页面通常由,html,css,js三部分组成,一般我们会把css文件放在head头部加载,而js文件则放在页面的最底部加载,想要知道为什么大家都会不约而同的按照这个标准进行构建页面, ...
- nginx实现动态分离,解决css和js等图片加载问题
改帖专门为使用nginx,通过nginx把请求转发到web服务器再返回客户端的时候,解决css和js和图片加载不出来的问题. 如果没安装nginx,请访问一下地址进行安装 http://www.cnb ...
- 网页加载速度优化2--先加载css,然后再加载js文件。
网页加载时,是按从上到下,从左到右的顺序加载的.所以一定要先加载css文件(不要让用户看到一个杂乱无章的页面),最后再加载js文件,js一般都是处理功能的,所以不需要提前加载.先给用户观感,再给用户上 ...
- js插件动态加载js、css解决方案
最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的 ...
随机推荐
- Thunder团队第三周 - Scrum会议5
Scrum会议5 小组名称:Thunder 项目名称:i阅app Scrum Master:苗威 工作照片: 参会成员: 王航:http://www.cnblogs.com/wangh013/ 李传康 ...
- NIO 服务端TCP连接管理的方案
最近做的一个项目需要在服务端对连接端进行管理,故将方案记录于此. 方案实现的结果与背景 因为服务端与客户端实现的是长连接,所以需要对客户端的连接情况进行监控,防止无效连接占用资源. 完成类似于心跳的接 ...
- sql update limit1
更新限制:为了避免全表更新,错误更新影响太多,加上limit1 多了一层保障.
- iOS- 网络请求的两种常用方式【GET & POST】的区别
GET和POST 网络请求的两种常用方式的实现[GET & POST] –GET的语义是获取指定URL上的资源 –将数据按照variable=value的形式,添加到action所指向的URL ...
- lol人物模型提取(五)
修改了发过去后,那边说吊坠的绳子太细了,厚度至少1mm,推荐是2mm,需要我自己加粗,没办法又得用3ds max一根一根线地缩放了. 修改好后问报价,高精度树脂打印需要730元,还不带上色的, ...
- "亿家App"问卷调查分析结果及心得体会
一.问卷问题设计 调查背景:随着现代社会互联网的发展,基于家庭产生的服务项目也越来越多.为增加家庭之间的交流和互助,增加家庭内部.家庭与家庭之间的沟通互助,并利用互联网便捷交流的优势,使家庭在享受服务 ...
- C语言宏中"#"和"##"的用法
转自:https://www.cnblogs.com/hnrainll/archive/2012/08/15/2640558.html 在查看linux内核源码的过程中,遇到了许多宏,这里面有许多都涉 ...
- django设置首页
1.在views中添加一个def 为homepage basepath=os.getcwd()+'\\dockerApp\\app\\templates\\';def homepage(request ...
- mysql通过binlog恢复数据
如果mysql不小心操作失误导致数据错误或者丢失这时候binlog起到了很大的作用 恢复有几种方式 1.按时间恢复--start-datetime 如果确定了时间点,那么按时间恢复是一个再好不过的 ...
- 【Maven】Snapshot和Release版本的区别
Snapshot版本代表不稳定.尚处于开发中的版本,快照版本. Release版本则代表稳定的版本,发行版本. 什么时候用Snapshot版本? 依赖库中的jar正处于开发的阶段,会被经常被更新,这种 ...