博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
asp.net mvc自动压缩文件,并生成CDN引用
阅读量:6195 次
发布时间:2019-06-21

本文共 8123 字,大约阅读时间需要 27 分钟。

很多站点都是用了静态文件分离。我推荐一种处理静态文件分离的方式。 BundleExtensions.cs
public static class BundleExtensions    {        public static string Version = "1.0.0";        public static string ScriptsPath = "Cdn";        public static Bundle Production(this Bundle bundle, string cdn, string root, string minified,            string full = "")        {            var transform = new ScriptsBundleTransform()            {                Version = Version,                ScriptsPath = System.IO.Path.Combine("~/", ScriptsPath, root),                Minified = minified,                Full = full            };            bundle.Transforms.Add(transform);            bundle.CdnPath = cdn + "/" + root + "/" + string.Format("{0}?{1}", minified, Version);            return bundle;        }    }

ScriptsBundleTransform.cs

public class ScriptsBundleTransform : IBundleTransform    {        public string ScriptsPath { get; set; }        public string Version { get; set; }        public string Minified { get; set; }        public string Full { get; set; }        public ScriptsBundleTransform()        {        }        public ScriptsBundleTransform(string path, string version, string minified, string full)        {            ScriptsPath = path;            Version = version;            Minified = minified;            Full = full;        }        public void Process(BundleContext context, BundleResponse response)        {            string scriptsRoot = context.HttpContext.Server.MapPath(ScriptsPath);            if (!Directory.Exists(scriptsRoot))                Directory.CreateDirectory(scriptsRoot);            //  if minified file name specified...            if (!string.IsNullOrEmpty(Minified))            {                using (TextWriter writer = File.CreateText(Path.Combine(scriptsRoot, Minified)))                {                    writer.Write(response.Content);                }            }            //  if full file name specified...            if (!string.IsNullOrEmpty(Full))            {                using (Stream writer = File.OpenWrite(Path.Combine(scriptsRoot, Full)))                {                    foreach (var file in response.Files)                    {                        file.VirtualFile.Open().CopyTo(writer);                    }                }            }        }    }

BundleConfig.cs

public static void RegisterBundles(BundleCollection bundles)        {            bundles.UseCdn = true;            BundleTable.EnableOptimizations = true;            //制定压缩后的资源存储路径            BundleExtensions.ScriptsPath = "Resource";            //制定请求时代的后缀,为了刷新掉客户端的缓存            BundleExtensions.Version = "00001";            //CDN站点地址            const string ajaxCdnPath = "http://localhost/Cdn";            bundles.Add(new ScriptBundle("~/bundles/bootstrap")                .IncludeFallback("$.fn.affix",                    "~/Resource/Scripts/common/transition.js",                    "~/Resource/Scripts/common/button.js",                    "~/Resource/Scripts/common/affix.js",                    "~/Resource/Scripts/common/tab.js",                    "~/Resource/Scripts/common/collapse.js",                    "~/Resource/Scripts/common/tooltip.js",                    "~/Resource/Scripts/common/respond.js")                .Production(ajaxCdnPath, "Scripts", "bootstrap.mincdn.js", "bootstrap.src.js"));            bundles.Add(new ScriptBundle("~/Content/bootstrap")                .Include("~/Resource/Content/bootstrap.css")                .Include("~/Resource/Content/common/button.css")                .Include("~/Resource/Content/common/bootstrap-theme.css")                .Production(ajaxCdnPath, "Content", "bootstrap.mincdn.css", "bootstrap.src.css"));        }

 

这样的话就能生成 CDN 站点下的JS文件引用了

对了这里漏掉了一个地方,

http://localhost/Cdn站点需要你在IIS中指定到你站点的Resource下,不然访问不到你的JS文件。

但是如果CDN站点挂掉了怎么办,咱们继续:

SctiptsBundleExtensions.cs

public static class SctiptsBundleExtensions    {        public static ScriptBundle IncludeFallback(this ScriptBundle bundle, string cdnFallbackExpression,            string virtualPath, params IItemTransform[] transforms)        {            bundle.CdnFallbackExpression = cdnFallbackExpression;            bundle.Include(virtualPath, transforms);            return bundle;        }        public static ScriptBundle IncludeFallback(this ScriptBundle bundle, string cdnFallbackExpression,          params string[] virtualPaths)        {            bundle.CdnFallbackExpression = cdnFallbackExpression;            bundle.Include(virtualPaths);            return bundle;        }    }

 

bundles.Add(new ScriptBundle("~/bundles/jquery")                .IncludeFallback("window.jQuery", "~/Resource/Scripts/common/jquery-{version}.js")                .Production(ajaxCdnPath, "Scripts", "jquery.mincdn.js", "jquery.src.js"));

这样会生成如下的JS应用:

这样的话当CDN站点挂掉了还是能够访问到JS文件的。

接下来CSS怎么处理呢:

StyleBundleExtensions.cs

public static class StyleBundleExtensions    {        ///         /// Include a stylesheet to fallback to when external CdnPath does not load.        ///         ///         /// Virtual path to fallback stylesheet        /// Stylesheet class name applied to test DOM element        /// Rule name to test when the class is applied ie. width        /// Value to test when the class is applied ie. 1px        /// 
public static StyleBundle IncludeFallback(this StyleBundle bundle, string fallback, string className = null, string ruleName = null, string ruleValue = null) { if (String.IsNullOrEmpty(bundle.CdnPath)) { throw new Exception("CdnPath must be provided when specifying a fallback"); } if (VirtualPathUtility.IsAppRelative(bundle.CdnPath)) { bundle.CdnFallbackExpress(fallback); } else if (new[] { className, ruleName, ruleValue }.Any(String.IsNullOrEmpty)) { throw new Exception( "IncludeFallback for cross-domain CdnPath must provide values for parameters [className, ruleName, ruleValue]."); } else { bundle.CdnFallbackExpress(fallback, className, ruleName, ruleValue); } return bundle; } private static StyleBundle CdnFallbackExpress(this StyleBundle bundle, string fallback, string className = null, string ruleName = null, string ruleValue = null) { bundle.Include(fallback); fallback = VirtualPathUtility.ToAbsolute(fallback); bundle.CdnFallbackExpression = String.IsNullOrEmpty(className) ? String.Format(@"function() {
{ var len = document.styleSheets.length; for (var i = 0; i < len; i++) {
{ var sheet = document.styleSheets[i]; if (sheet.href.indexOf('{0}') !== -1) {
{ var rules = sheet.rules || sheet.cssRules; if (rules.length <= 0) {
{ document.write('
'); }} }} }} return true; }}()", bundle.CdnPath, fallback) : String.Format(@"function() {
{ var loadFallback, len = document.styleSheets.length; for (var i = 0; i < len; i++) {
{ var sheet = document.styleSheets[i]; if (sheet.href.indexOf('{0}') !== -1) {
{ var meta = document.createElement('meta'); meta.className = '{2}'; document.head.appendChild(meta); var value = window.getComputedStyle(meta).getPropertyValue('{3}'); document.head.removeChild(meta); if (value !== '{4}') {
{ document.write('
'); }} }} }} return true; }}()", bundle.CdnPath, fallback, className, ruleName, ruleValue); return bundle; } }

 

好吧后面的大家自己摸索吧:)上班了 很多代码是网上抄袭的,东拼西凑。

转载地址:http://bmuca.baihongyu.com/

你可能感兴趣的文章
安装配置redis
查看>>
web -- Angularjs 笔记
查看>>
洛谷——P1348 Couple number
查看>>
ios之coredata(一)
查看>>
KVO实现自定义文件复制进度展示
查看>>
hadoop3.0.0测验
查看>>
事件:限制类型能力
查看>>
HTML标签,CSS简介
查看>>
Android图片采样缩放
查看>>
angular smart-table组件如何定制化之初步研究
查看>>
APPium-python实例(记录)
查看>>
coredata
查看>>
MongoDB概述
查看>>
Loj10022 埃及分数(迭代加深搜索IDDFS)
查看>>
linux 调试 之printf
查看>>
常用STL用法总结
查看>>
初探验证码识别
查看>>
FFmpeg详解
查看>>
聊聊自己的职业规划这个件事
查看>>
Map小结
查看>>