优点:修改js或css时会自动生成hash版本号。

缺点:需要在BundleConfig中先添加对应的文件,然后在html中再引用对应的bundle,多操作了一步。

web.config中 <compilation debug="true" targetFramework="4.5" />

Install-Package Microsoft.AspNet.Web.Optimization

1、BundleConfig

  如果是调试模式,前端页面会显示真实的js、css路径,生产环境是会显示前面的路径。在bundles中还可以使用通配符引用。路径必须要使用~/的方式,不能用/

 bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
 bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js")); bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));

2、前端页面

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

3、Global文件中

  要在Application_Start事件中注册Bundles。

BundleConfig.RegisterBundles(BundleTable.Bundles);

4、说明

  只有在生产环境,修改js、css文件才会生成版本哈希值。

  在生产环境,使用bundles的方式会自动引用压缩版min文件。

5、截图说明

  调试模式

  生产环境

MVC-采用Bundles方式引入css和js文件的更多相关文章

  1. Thymeleaf模版--子页面单独引入CSS、JS文件

    https://blog.csdn.net/u010392801/article/details/80465800 ****************************************** ...

  2. 使用时间戳引入css、js文件

    前言 最近在一家创业公司实习,主要负责新版官网和商家平台管理系统的前端开发和维护,每次测试都要上传文件到ftp服务器端测试,初期由于更新修改比较频繁,每次都是直接上传覆盖css.js.php文件,链接 ...

  3. 在VIEW引入CSS、JS文件

    外联 CSS: <?= Html::cssFile('@web/css/ie5.css', ['condition' => 'IE 5']) ?> generates <!-- ...

  4. Django2.0引入css、js、img文件

    Django2.0引入css.js.img文件 一.文件结构 二.settings.py的配置 # Static files (CSS, JavaScript, Images) # https://d ...

  5. Tornado引入静态css、js文件

    一.静态路径 template_path=os.path.join(os.path.dirname(__file__), "templates") 这里是设置了模板的路径,放置模板 ...

  6. 在引入的css或者js文件后面加参数的作用

    有时候可能会遇到js或者css文件引用后传递参数: css和js带参数(形如.css?v=与.js?v=) <script type=”text/javascript” src=”jb51.js ...

  7. coding++ :在引入的css或者js文件后面加参数的作用

    前沿: 有些小伙伴们在页面(F12)直接对 JS.CSS 文件进行编辑.或者打断点调试的时候 可能会发现 所有的操作都不生效,为什么? 原因可能存在以下情况 有时候可能会遇到js或者css文件引用后传 ...

  8. CI框架引入外部css和js文件

    首先在项目根目录下建立assets文件夹,在这个文件夹下再建立css和js文件夹分别放置css和js文件 然后,在项目根目录下建立.htaccess文件 内容如下: RewriteEngine on  ...

  9. IE浏览器没有加载CSS或js文件的秘密及解决办法

    其实是两处资料拼成这一篇博文的,因为在开发过程中遇到,有的文章只是说明原因,而没有给出解决方案,所以再次给出解释和解决方法,以供参考,如果有好的解决方法,也请分享下! ---------------- ...

随机推荐

  1. 重置ubuntu13.04 密码

    方法如下: Restart Machine HOLD Shift Button ( You will get message "GRUB Loading") Select the ...

  2. cnblog markdown 模式下调整图片大小

    流程 上传图片,获得图片链接,例如 ![](https://img2020.cnblogs.com/blog/2163507/202010/2163507-20201030205035211-7968 ...

  3. 微软面试题: LeetCode 4. 寻找两个正序数组的中位数 hard 出现次数:3

    题目描述: 给定两个大小为 m 和 n 的正序(从小到大)数组 nums1 和 nums2.请你找出并返回这两个正序数组的中位数. 进阶:你能设计一个时间复杂度为 O(log (m+n)) 的算法解决 ...

  4. 算法:矩阵连乘(Java)动态规划

    Description 给你2个矩阵A.B,我们使用标准的矩阵相乘定义C=AB如下: A数组中栏(column)的数目一定要等于B数组中列(row)的数目才可以做此2数组的相乘.若我们以rows(A) ...

  5. 使用Feign发送HTTP请求

    使用Feign发送HTTP请求 在往常的 HTTP 调用中,一直都是使用的官方提供的 RestTemplate 来进行远程调用,该调用方式将组装代码冗余到正常业务代码中,不够优雅,因此在接触到 Fei ...

  6. tp5 统一返回json格式

    控制器调用 public function json(){ if (request()->isPost()) { return jsonData(1,'转换成功',数据(可不填)); } } 公 ...

  7. cakephp中sql查询大于

    $list = $this->Capital->find('all', array('conditions'=>array('amount >'=>0)));

  8. Perfview 分析进程性能

    PerfView 概述: PerfView是一个可以帮助你分析CPU和内存问题的工具软件.它非常轻量级也不会入侵诊断的程序,在诊断过程中对诊断的程序影响甚微. Visual Studio自带的性能分析 ...

  9. vue集成高德地图

    vue集成高德地图 前言 二.使用步骤 1.注册高德开发平台 2.vue 结尾 前言 之前玩Thymeleaf的时候玩过高德地图,现在无聊Vue项目也整个地图进去~ 二.使用步骤 1.注册高德开发平台 ...

  10. Oracle数据库由dataguard备库引起的log file sync等待

    导读: 最近数据库经常出现会话阻塞的报警,过一会又会自动消失,昨天晚上恰好发生了一次,于是赶紧进行了查看,不看不知道,一看吓一跳,发现是由dataguard引起的log file sync等待.我们知 ...