如何选择网站的关键词,wordpress建立个人博客,wordpress强制安装插件,wordpress分录信息主题一、简述 Bundle#xff0c;英文原意就是捆、收集、归拢。在MVC中的Bundle技术#xff0c;也就是一个对css和js文件的捆绑压缩的技术。 它的用处#xff1a; 将多个请求捆绑为一个请求#xff0c;减少服务器请求数 压缩javascript#xff0c;css等资源文件#xff0c;减小…一、简述 Bundle英文原意就是捆、收集、归拢。在MVC中的Bundle技术也就是一个对css和js文件的捆绑压缩的技术。 它的用处 将多个请求捆绑为一个请求减少服务器请求数 压缩javascriptcss等资源文件减小网络带宽提升性能 使用Bundle技术并且拥有缓存功能同时也可以对资源文件进行一定的模块化管理可使用正则对需要的文件进行过滤匹配也可以使用cdn文件 二、技术详解 1.怎么开启bundle 在项目的App_Start文件夹中会有一个BundleConfig.cs文件 public class BundleConfig{// For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId301862public static void RegisterBundles(BundleCollection bundles){bundles.Add(new ScriptBundle(~/bundles/jquery).Include(~/Scripts/jquery-{version}.js));bundles.Add(new ScriptBundle(~/bundles/jqueryval).Include(~/Scripts/jquery.validate*));// 使用要用于开发和学习的 Modernizr 的开发版本。然后当你做好// ready for production, use the build tool at https://modernizr.com to pick only the tests you need.bundles.Add(new ScriptBundle(~/bundles/modernizr).Include(~/Scripts/modernizr-*));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));BundleTable.EnableOptimizations true; //是否打包压缩}} 对Bundle的注册是在项目根下的Global.asax文件中这个文件中的Application_Start是网站程序的开始里面注册了网站各种初始化的内容其中就包括对BundleTable的Bundle添加BundleConfig.RegisterBundles(BundleTable.Bundles); 默认情况下Bundle是会对js和css进行压缩打包的不过有一个属性可以显式的说明是否需要打包压缩。 BundleTable.EnableOptimizations true; 配置web.config关掉调试状态否则不会进行压缩。 system.webcompilation debugfalse targetFramework4.5.2 //system.web 2.如何使用 视图中调用方法 Styles.Render(~/Content/css) Scripts.Render(~/bundles/bootstrap) 捆绑框架如以下几个共同的约定 如果“FileX.min.js”和“FileX.js”都存在请为发行版选择“.min”文件。选择用于调试的非.min版本。忽略-vsdoc仅使用智能感知的文件 如 jquery-1.7.1-vsdoc.js。如上所示的{version}通配符匹配用于自动创建一个 jQuery 束具有适当版本的 jQuery脚本文件夹中。在此示例中使用通配符提供了以下好处 允许您使用 NuGet 更新到新的 jQuery 版本而无需更改前面的绑定代码或 jQuery 引用在您查看网页。自动选择完整版为调试配置和发布的.min版本生成。3.使用 CDN 以下代码将使用 CDN jQuery 绑定来替换本地 jQuery 绑定。 public static void RegisterBundles(BundleCollection bundles)
{bundles.UseCdn true; //enable CDN support//add link to jquery on the CDNvar jqueryCdnPath http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js;bundles.Add(new ScriptBundle(~/bundles/jquery,jqueryCdnPath).Include(~/Scripts/jquery-{version}.js));
} 在上面的代码中jQuery 将请求从 CDN 虽然在释放模式和 jQuery 的调试版本将被回迁本地在调试模式下。当使用 CDN你应该有一个回退机制在 CDN 请求失败的情况下。下面的标记片段从布局文件的末尾显示脚本添加请求 jQuery 应 CDN 失败。 Scripts.Render(~/bundles/jquery)script typetext/javascriptif (typeof jQuery undefined) {var e document.createElement(script);e.src Url.Content(~/Scripts/jquery-1.7.1.js);e.type text/javascript;document.getElementsByTagName(head)[0].appendChild(e);}/script RenderSection(scripts, required: false) 三、常见问题 1. css中引用的图片路径出现错误 在css中图片路径一般都是写相对路径使用bundle后出现错误。处理方法通过 new CssRewriteUrlTransform() 来解决 bundles.Add(new StyleBundle(~/Content/login).Include(~/Content/login.css, new CssRewriteUrlTransform())); 2. css中使用Import base.css 找不到对应的文件 解决修改为 import url(base.css); import的相关文章https://segmentfault.com/a/1190000000369549 3.JS智能感知 重点就是最下面的一条~/Scripts/_references.js这个就是默认的自定义公共js智能感知引用文件 详细看https://www.cnblogs.com/zuqing/p/4862142.html 参考 http://blog.csdn.net/zhou44129879/article/details/16818987 http://www.cnblogs.com/weishao/archive/2013/04/12/3015005.html
