瀏覽器

SPA 部署後部分頁面載入失敗?覆蓋式部署的對應解法

這是近期工作上遇到的問題,記錄一下原因與解法,解法不一定是最佳解。 問題背景 接手了公司的一個網站,發現使用者一直在此單頁應用 SPA 中遇到偶發、但令人頭痛的問題。通常會在網站「部署新版本」後、且「使用者尚未重新整理頁面」的情境下發生。 情境如下: 1. 使用者正在我們的後台網站上瀏覽(例如還停留在 /home)。 2. 這時我們開發者部署了一個新版本,且採用了「覆蓋式部署」(也就是直接覆蓋掉原本的靜態資源)。 3. 使用者繼續使用網站並透過前端路由導覽到尚未載入過的頁面(例如 /profile),這個頁面會觸發懶加載動作(例如 Profile.chunk.js)。 4. 由於使用者當前的 HTML 是舊版本,因此所引用的 chunk 路徑還是舊版本的,如 static/js/Profile.abcd1234.chunk.js。 5. 但這個資源已經在部署新版本時被移除或覆蓋,
SimonAllen

Chrome 83 DevTools 新功能:切換 location 與 locales

這篇算是隨手紀錄,前幾天無意翻了翻 Chrome 文件,Chrome 83 (約2020年5月底發布) 更新後新增了些許功能。 不過最讓我眼睛一亮的是, DevTools 新增切換 location 與 locales 的功能。 打開 DevTools,選擇 ... > More tools > Sensors 可以看到 Sensors 下方有個 Location,點選 No override 選單可看見預設已有 London、Tokyo 等城市可選擇,使用方式就是點選任意城市後重新整理瀏覽器即可。 也可以點選 Manage 自行新增城市、經緯度、時區、語系 真的是非常實用功能,這對要做多國語系、地區內容的工程師們來說,可謂是一大福音呀! 參考資料: Emulate locales Chrome DevTools:
SimonAllen

mkcert:讓你在 localhost 開發也能用 https

mkcert 可以開發者快速產生 https 憑證,讓本地端 localhost 開發也能用https。 http、https 之間差異這裡就不贅述,對前端瀏覽器而言,串接後端 API 最常遇到的就是跨域 CORS 的問題,而不同協議 http、https 彼此也有跨域問題。 通常 local 開發環境通常會是 http,以前筆者還菜菜的時候,不懂 localhost 怎麼會有需要 https 這個需求,直到我遇到 Yahoo Sign in 這種一定要 https 的 3rd 功能要串接.... 總不能本機盲改串功能,deploy 上測試站才能測吧,為了做到在本機電腦也能正常開發,我們需要讓 localhost 變成 https 協定。 mkcert 在不同電腦環境、
SimonAllen

自幹 React Img LazyLoad 元件

為什麼要使用圖片 LazyLoad? 1. 減少頻寬浪費 圖片與影片是網站中最吃資源的元素之一,尤其在行動網路環境下,過度 PreLoad 預載會導致頻寬浪費。LazyLoad 可延遲非可視範圍內的圖片載入,只在使用者滑動到該區域時才載入圖片。 2. 提升首次載入速度 圖片載入不只是下載,還會耗用瀏覽器 CPU 解析與渲染時間。 LazyLoad 可避免瀏覽器在首次載入時就忙著處理整頁圖片,提升 First Paint 時間,讓內容更快顯示。 3. 強化使用者體驗 使用者更快看到畫面上可見的內容,自然會覺得「這網頁好快」。反之,如果等圖卡住了頁面,體驗就會大打折扣。 各大網站 LazyLoad 的應用範例 PChome 先顯示灰底圖片,等圖片載入後才替換。 ETtoday 有 loading 動畫的底圖,載入圖片後再替換。 Medium 的高級做法:漸進式圖片置換 Medium 的做法分成三階段: 1.
SimonAllen

IE 議題

前陣子與到各種 IE 問題真的有夠痛苦,實在不理解為什麼都 2019 年了還要支援到 IE9?IE11 就算了,IE9 欸??IE 有多少使用量不就 GA 報表一看就知道了嗎? 主事 PM 不理解 RD 處理 IE 9 的時間都能做其他新功能了,哀抱怨歸抱怨,這裡紀錄一下遇到的問題: 問題:HTML 5 的 input placeholder 這個 屬性 attribute,要在 IE10 才支援 解決:在與 PO 討論後、請資深 RD 與 PO 討論後,請 RD Leader 再和
SimonAllen