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

32

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

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

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

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

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

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

    <script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
    <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处理这里是存在问题的。如果你有更好的处理方案,欢迎评论告知我,谢谢。 当然文中有不当的地方,也欢迎大家指正,谢谢。

你可能感兴趣的

12 条评论
相门城下 · 11月30日

https://cdn.bootcss.com/vue/2... 还没下载完的时候
会不会去下载./static/js/vue.min.js

回复

0

不会的,因为js是单线程的

darkerXi 作者 · 12月1日
0

@darkerXi 然而浏览器是多线程的,它可以同时发起多个请求加载多个js

相门城下 · 12月1日
0

@相门城下 你可以自己做个测试,在第一个js中,放大量的内容,在network中看看他们的加载顺序

darkerXi 作者 · 12月1日
wangduanduan · 11月30日

bootcdn还是不用为好,之前挂了,搞得很多人连夜加班。生产环境,不是自己的cdn还是不用为好。

回复

0

@Carl 老大为了省钱,要求用CDN,没办法。

stemp1234 · 12月1日
0

嗯,是的。毕竟是别人的服务器,杀生大权掌握在自己手中还是靠谱。但是不管哪的cdn,都有可能出现问题,我们只要做好预案就可以了。

darkerXi 作者 · 12月1日
0

@stemp1234 别逗了,免费的cdn还能用?给自己埋雷嘛。

rodger · 12月4日
叶小污 · 12月4日

window.Element ???

回复

0

window.ELEMENT

叶小污 · 12月4日
载入中...