优点:修改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. 动态导航栏和JavaScript箭头函数

    动态导航栏和JavaScript箭头函数 今天我们来写一下动态的导航栏,并且学一下JavaScript的箭头函数等相关问题. 样式如下所示: html中执行代码如下所示: <!DOCTYPE h ...

  2. Vue知识点回顾(一)

    一.什么是vue? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不 ...

  3. Python学习第三天 --- 分支、循环、条件、枚举

    1.表达式: 表达式(Expression)是运算符(operator)和操作数(operand)所构成的序列. 2.表达式的优先级: 3.python的注释: #单行注释 ''' 多行注释 ''' ...

  4. Folx专业版任务计划功能详解

    Folx专业版的任务计划功能允许用户以时间表的方式,制定下载计划.按照预先设定的时间计划,Folx会在指定的时间段内,自动开启或停止下载任务. 另外,用户还可以设置自动关机功能.当计划下载任务停止时, ...

  5. Codeforces Round #667 (Div. 3) B、C、D、E 题解

    抱歉B.C题咕了这么久 B. Minimum Product #枚举 #贪心 题目链接 题意 给定四个整数\(a, b, x, y\),其中\(a\geq x, b\geq y\),你可以执行不超过\ ...

  6. Matlab 条件循环函数

    条件判断 if 表达式 语句 elseif 表达式 语句 -. else 语句 end 这个与c语言不同的就是 1:要多一个end 2:还有没有括号 3:else if连在一起 for 循环 for ...

  7. kafka入门之broker--日志存储设计

    kafaka并不是直接将原省消息写入日志文件的,相反,它会将消息和一些必要的元数据信息大宝在一起封装成一个record写入日志.其实就是我们之前介绍的batch 具体对每个日志而言,kafka又将其进 ...

  8. Prometheus Operator自定义监控项

    Prometheus Operator默认的监控指标并不能完全满足实际的监控需求,这时候就需要我们自己根据业务添加自定义监控.添加一个自定义监控的步骤如下: 1.创建一个ServiceMonitor对 ...

  9. VS2019配置C+++mingW32配置

    两个安装教程博客 http://t.sg.cn/yq22mn http://t.sg.cn/wsavo0 基于调试报错,是因为文件夹是中文,贴一个详细的博客:http://t.sg.cn/3j5e4z

  10. 08_UI控件

    uiControl整体界面如下图所示,按照视频教程,学习控件由于是初学,都是最基础知识.还有ImageSwitcher.Gallery未更新,o(╯□╰)o 1 package com.example ...