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

现在的前端项目追求的不单单是能用能看的程度，而是愈发追求项目的性能，对用户体验的影响。而如今的开发工具在性能优化方面也替咱们作很大一部分的工做，想必你们对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处理这里是存在问题的。若是你有更好的处理方案，欢迎评论告知我，谢谢。 固然文中有不当的地方，也欢迎你们指正，谢谢。