預防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處理這裏是存在問題的。若是你有更好的處理方案，歡迎評論告知我，謝謝。 固然文中有不當的地方，也歡迎你們指正，謝謝。