预防cdn链接失效，无缝切换本地文件

番茄西红柿发布于2019-07-16 14:29 / 1171人阅读

摘要：想必大家都能想到的处理方案就是如果引用的文件出错了，拿不到，那么我们就引用本地相对应的文件。不可否认对处理这里是存在问题的。

如今的前端项目追求的不仅仅是能用能看的程度，而是愈发追求项目的性能，对用户体验的影响。而现在的开发工具在性能优化方面也替我们做很大一部分的工作，想必大家对CDN的使用都是轻车熟路了，但是大家有没有考虑过，万一我们使用的CDN服务器，地址啥的出现了问题，导致我们引用的CDN文件都拿不到了，那么我们的项目崩溃了，天了噜，崩溃了。

因此我们得考虑下，引用CDN的文件拿不到了，应该有相应的处理方案，而不会直接导致我们项目崩溃。

想必大家都能想到的处理方案就是：如果引用CDN的文件出错了，拿不到，那么我们就引用本地相对应的文件。

有人肯定会说，这样处理会导致项目体积变大的。对，是的，没有错，会使项目体积变大，但是这种处理总不会直接导致项目崩溃的，给用户的体验能更好一点，牺牲这么一点点是值得的。很多事情都是没有绝对的情况，都是相对的，这就需要我们自己去权衡了。

话不多说，直接进入正题。下面以Vue项目为列:

当然是我们项目的启动页/index.html

下面就在啰嗦几点，看懂的慢走，不送啦。不太懂的再瞅瞅。

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://www.ucloud.cn/yun/33801.html

预防cdn链接失效，无缝切换本地文件

摘要：想必大家都能想到的处理方案就是如果引用的文件出错了，拿不到，那么我们就引用本地相对应的文件。不可否认对处理这里是存在问题的。如今的前端项目追求的不仅仅是能用能看的程度，而是愈发追求项目的性能，对用户体验的影响。而现在的开发工具在性能优化方面也替我们做很大一部分的工作，想必大家对CDN的使用都是轻车熟路了，但是大家有没有考虑过，万一我们使用的CDN服务器，地址啥的出现了问题，导致我们引...

laznrbfe 2019-08-23 13:49 评论0 收藏0
预防cdn链接失效，无缝切换本地文件

摘要：想必大家都能想到的处理方案就是如果引用的文件出错了，拿不到，那么我们就引用本地相对应的文件。不可否认对处理这里是存在问题的。如今的前端项目追求的不仅仅是能用能看的程度，而是愈发追求项目的性能，对用户体验的影响。而现在的开发工具在性能优化方面也替我们做很大一部分的工作，想必大家对CDN的使用都是轻车熟路了，但是大家有没有考虑过，万一我们使用的CDN服务器，地址啥的出现了问题，导致我们引...

oogh 2019-06-21 16:12 评论0 收藏0
前端面试题总结——综合问题(持续更新中)

摘要：如何实现浏览器内多个标签页之间的通信阿里调用等本地存储方式页面可见性可以有哪些用途通过的值检测页面当前是否可见，以及打开网页的时间等在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放网页验证码是干嘛的，是为了解决什么安全问题。前端面试题总结——综合问题(持续更新中) 1.页面从输入URL到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好） 1.输入域名地址2.发...

Lin_YT 2019-08-30 13:59 评论0 收藏0
前端面试题总结——综合问题(持续更新中)

摘要：如何实现浏览器内多个标签页之间的通信阿里调用等本地存储方式页面可见性可以有哪些用途通过的值检测页面当前是否可见，以及打开网页的时间等在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放网页验证码是干嘛的，是为了解决什么安全问题。前端面试题总结——综合问题(持续更新中) 1.页面从输入URL到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好） 1.输入域名地址2.发...

elarity 2019-08-01 18:38 评论0 收藏0
前端面试题总结——综合问题(持续更新中)

摘要：如何实现浏览器内多个标签页之间的通信阿里调用等本地存储方式页面可见性可以有哪些用途通过的值检测页面当前是否可见，以及打开网页的时间等在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放网页验证码是干嘛的，是为了解决什么安全问题。前端面试题总结——综合问题(持续更新中) 1.页面从输入URL到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好） 1.输入域名地址2.发...

harriszh 2019-08-26 17:15 评论0 收藏0