预防cdn链接失效,无缝切换本地文件
如今的前端项目追求的不仅仅是能用能看的程度,而是愈发追求项目的性能,对用户体验的影响。而现在的开发工具在性能优化方面也替我们做很大一部分的工作,想必大家对CDN的使用都是轻车熟路了,但是大家有没有考虑过,万一我们使用的CDN服务器,地址啥的出现了问题,导致我们引用的CDN文件都拿不到了,那么我们的项目崩溃了,天了噜,崩溃了。
因此我们得考虑下,引用CDN的文件拿不到了,应该有相应的处理方案,而不会直接导致我们项目崩溃。
想必大家都能想到的处理方案就是:如果引用CDN的文件出错了,拿不到,那么我们就引用本地相对应的文件。
有人肯定会说,这样处理会导致项目体积变大的。对,是的,没有错,会使项目体积变大,但是这种处理总不会直接导致项目崩溃的,给用户的体验能更好一点,牺牲这么一点点是值得的。很多事情都是没有绝对的情况,都是相对的,这就需要我们自己去权衡了。
话不多说,直接进入正题。下面以Vue项目为列:
当然是我们项目的启动页/index.html
<script>!window.Vue && document.write(unescape('%3Cscript src="./static/js/vue.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script>!window.VueRouter && document.write(unescape('%3Cscript src="./static/js/vue-router.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script>!window.axios && document.write(unescape('%3Cscript src="./static/js/axios.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn.bootcss.com/element-ui/2.4.9/index.js"></script>
<script>!window.Element && document.write(unescape('%3Cscript src="./static/js/element-ui-index.js"%3E%3C/script%3E'))</script>
<script>!window.Element && document.write(unescape('%3Clink href="./static/css/element-ui-index.css" rel="stylesheet"%3E%3C/link%3E'))</script>
<script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
<script>!window.Qs && document.write(unescape('%3Cscript src="./static/js/qs.js"%3E%3C/script%3E'))</script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script>!window.Vuex && document.write(unescape('%3Cscript src="./static/js/vuex.min.js"%3E%3C/script%3E'))</script>
下面就在啰嗦几点,看懂的慢走,不送啦。不太懂的再瞅瞅。
1)、不用担心会全部加载,出现重复的情况,不信邪的自己去NetWork里验证。
2)、!window.Vue
、!window.VueRouter
、!window.axios
、!window.Element
、!window.Qs
、!window.Vuex
这些都是些什么鬼? 那是第三方库暴露出来的方法名。也可以去看看我之前 “配置webpack中externals来减少打包后vendor.js的体积” 这篇文章。
3)、对js文件的处理都是这样的,但是对css文件应该怎么处理呢。 眼尖的已经看到了,上面那段中已经写出来。
4)、心细善于思考的你,还会发现,其实对css文件的处理还是存在问题的。 因为难以直接判断出CDN上的css文件是否成功加载,所以直接用js文件加载完成的判断方式,打包一起处理。这样如果CDN上的整个Element-UI出现问题,那js和css都可以加载本地的。最坏的情况是,CDN上的css文件很不巧的出现问题了呢? 那就让凉吧。没办法。。。哈哈哈
因为对于css文件的处理,暂时没有想到好一点的处理方案,所以目前只能先这样统一处理。
不可否认对css处理这里是存在问题的。如果你有更好的处理方案,欢迎评论告知我,谢谢。 当然文中有不当的地方,也欢迎大家指正,谢谢。
原文地址:https://segmentfault.com/a/1190000017211876
预防cdn链接失效,无缝切换本地文件的更多相关文章
- iOS8 无缝切换WKWebView,借鉴IMYWebview,解决进度条,cookie,本地页面等问题
webkit使用WKWebView来代替IOS的UIWebView和OSX的WebView,并且使用Nitro JavaScript引擎,这意味着所有第三方浏览器运行JavaScript将会跟safa ...
- 在线Remix链接本地文件夹
问题 1.本地Remix环境版本滞后于在线编译器,新版本的语法在旧版本编译器中出现错误. 2.没有配置Vscode编译器,不便导入项目. 解决方案 *本解决方案基于Mac系统 创建共享文件夹 在本地创 ...
- 【Electron】Electron开发入门(七):打开本地文件或者网页链接 and webview里操纵electron api
1.打开本地文件或者网页链接 // 打开系统本地文件 const {shell} = require('electron'); // Open a local file in the default ...
- 16、爬取知乎大v张佳玮的文章“标题”、“摘要”、“链接”,并存储到本地文件
爬取知乎大v张佳玮的文章“标题”.“摘要”.“链接”,并存储到本地文件 # 爬取知乎大v张佳玮的文章“标题”.“摘要”.“链接”,并存储到本地文件 # URL https://www.zhihu.co ...
- Python:爬取一个可下载的PDF链接并保存为本地pdf文件
问题:网页http://gk.chengdu.gov.cn/govInfo/detail.action?id=2653973&tn=2中有一个PDF需要下载,开发者模式下该PDF的链接为htt ...
- Android主题换肤 无缝切换
2016年7月6日 更新:主题换肤库子项目地址:ThemeSkinning,让app集成换肤更加容易.欢迎star以及使用,提供改进意见. 更新日志: v1.3.0:增加一键切换切换字体(初版)v1. ...
- 简单检测CDN链接是否有效
CDN链接经常是使用的.但是,CDN链接挂了怎么办,因此,就要调用使用本站点的库,那么怎么实现呢? 检测CDN的jquery链接是否有效(这种方法比较简单) <script src=" ...
- 【DATAGUARD】物理dg配置客户端无缝切换 (八.4)--ora-16652 和 ora-16603错误
[DATAGUARD]物理dg配置客户端无缝切换 (八.4)--ora-16652 和 ora-16603错误 一.1 BLOG文档结构图 一.2 前言部分 一.2.1 导读 各 ...
- 【DATAGUARD】物理dg配置客户端无缝切换 (八.3)--客户端TAF 配置
[DATAGUARD]物理dg配置客户端无缝切换 (八.3)--客户端TAF 配置 一.1 BLOG文档结构图 一.2 前言部分 一.2.1 导读 各位技术爱好者,看完本文后,你 ...
随机推荐
- C# dynamic与var的区别
1.C#编程总结(十四)dynamic 2.var和dynamic的区别及如何正确使用dynamic?
- Codeforces 1114F(欧拉函数、线段树)
AC通道 要点 欧拉函数对于素数有一些性质,考虑将输入数据唯一分解后进行素数下的处理. 对于素数\(p\)有:\(\phi(p^k)=p^{k-1}*(p-1)=p^k*\frac{p-1}{p}\) ...
- vs2012 support BI
Microsoft SQL Server Data Tools - Business Intelligence for Visual Studio 2012 http://www.microsoft. ...
- Nginx中的Rewrite的重定向配置与实践
阅读目录 一:理解地址重写 与 地址转发的含义. 二:理解 Rewrite指令 使用 三:理解if指令 四:理解防盗链及nginx配置 简介:Rewrite是Nginx服务器提供的一个重要的功能, ...
- JS中实现JSON对象和JSON字符串之间的相互转换
对于主流的浏览器(比如:firefox,chrome,opera,safari,ie8+),浏览器自己提供了JSON对象,其中的parse和stringify方法实现了JSON对象和JSON字符串之间 ...
- Flask 学习系列(四)---Jinjia2 模板继承
1.基模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 《超实用的Node.js代码段》连载一:获取Buffer对象字节长度
我们知道Node.js框架下的Buffer对象能够对二进制数据提供很好的支持,那么获取一个Buffer对象真实的字节长度则是必须要用到的功能了.Node.js框架为开发人员提供了一个Buffer.by ...
- js正则匹配获取文件名
//获取文件名,不带后缀 var file_name=file_path.replace(/(.*\/)*([^.]+).*/ig,"$2"); //获取文件后缀 1.var Fi ...
- Ionic 2 中添加图表
有问题请加入马画藤群:181596813,也强烈欢迎各类建议和需求:Ionic 2 实例开发 今日更新新增章节——Ionic 2 中添加图表: Chart.js是一个在HTML5的<canvas ...
- PHP针对二维数组无限遍历变形研究
一.需要变形的二维数组 $arr = Array( Array ( 'material_id' => 1, 'material_name' => '铜板纸', 'parent_id' =& ...