MVC-采用Bundles方式引入css和js文件
2017-08-31 09:49
591 查看
优点:修改js或css时会自动生成hash版本号。
缺点:需要在BundleConfig中先添加对应的文件,然后在html中再引用对应的bundle,多操作了一步。
web.config中 <compilation debug="true" targetFramework="4.5" />
Install-Package Microsoft.AspNet.Web.Optimization
在生产环境,使用bundles的方式会自动引用压缩版min文件。
生产环境
缺点:需要在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、截图说明
调试模式生产环境
相关文章推荐
- html引入css文件和js文件方式
- MVC 之 解决MVC中使用BundleConfig.RegisterBundles引用Css及js文件发布后的丢失
- html引入css文件和js文件方式
- html引入css文件和js文件方式
- 解决MVC中使用BundleConfig.RegisterBundles引用Css及js文件发布后丢失的问题
- 解决MVC中使用BundleConfig.RegisterBundles引用Css及js文件发布后丢失的问题
- web应用性能优化--采用gzip静态压缩+动态压缩方式压缩js、css文件
- MVC 通过BundleConfig 将JS和CSS文件引入到视图中
- 解决MVC中使用BundleConfig.RegisterBundles引用Css及js文件发布后丢失的问题
- HtmlWebpackPlugin以inine方式引入JS/CSS文件
- 解决MVC中使用BundleConfig.RegisterBundles引用Css及js文件发布后丢失的问题
- thymeleaf引入js和css方式
- webuploader+springmvc实现多文件上传(html+js+css原创,后台代码借鉴)
- 4.0 mvc当中css的引入,js的引入,页面的跳转
- JSP引入css、js文件不起作用
- 如何在CodeIgniter中引入外部的JS和CSS文件
- html中引入js、css方式、写css方式
- 引入js和css文件的总结
- 进入做Mvc项目的时候 返现某个文件夹下面css js png等静态文件都访问不了