預防cdn鏈結失效,無縫切換本地檔案

2022-07-04 09:57:11 字數 1079 閱讀 9259

如今的前端專案追求的不僅僅是能用能看的程度,而是愈發追求專案的效能,對使用者體驗的影響。而現在的開發工具在效能優化方面也替我們做很大一部分的工作,想必大家對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檔案的處理,暫時沒有想到好一點的處理方案,所以目前只能先這樣統一處理。

預防cdn鏈結失效,無縫切換本地檔案

如今的前端專案追求的不僅僅是能用能看的程度,而是愈發追求專案的效能,對使用者體驗的影響。而現在的開發工具在效能優化方面也替我們做很大一部分的工作,想必大家對cdn的使用都是輕車熟路了,但是大家有沒有考慮過,萬一我們使用的cdn伺服器,位址啥的出現了問題,導致我們引用的cdn檔案都拿不到了,那麼我們的...

3 熱更新失效 彈簧的失效分析與預防技術參考

彈簧是通用機械必不可少的部件。在工作過程中起到緩衝平衡 儲能 自動控制 回位 安全保險等作用。在彈簧的使用過程中,機械故障往往是由於各種原因造成的。為此,有必要 彈簧失效的原因及預防措施。導致彈簧失效的主要因素是材料缺陷 製造缺陷 熱處理不當 表面處理不當和工作環境因素。彈簧表面缺陷,包括碰撞疤痕 ...

sed修改導致軟鏈結失效

因工作需要,我使用sed命令修改了 etc rc.local檔案,導致軟鏈結檔案 etc rc.local失效,上網搜尋了下,查明了原因 我所使用的sed語句 刪除 etc rc.local中iptables相關語句 sed i iptables t mangle n divert d etc rc...