Chrome 的應用商店里真是商品琳瑯滿目，針對程序員有一些可以提高用戶體驗和工作效率的插件，比如在逛github 的時候。。

Infinity 標簽頁

SourceGraph

國內訪問： https://extfans.com/extension/dgjhfomjieaadpoljlnidmbgkdffpack
最早我是在Chrome 商店發現的，用了一下體驗非常棒， 在github 上瀏覽項目可以在側變欄的sourcegraph中隨意瀏覽切換目錄，比直接點擊網頁快了不止5倍。

SourceGraph

最關鍵的還不是這個，在點擊進入代碼后，還支持Ctrl+ 鼠標 去檢索變量的引用關系，特別對于class 定義、方法definition和reference的檢索，可以跳轉到對應文件。

Infinity新標簽頁

國內訪問：https://extfans.com/extension/dbfmnekepjoapopniengjbcpnbljalfg

打開新標簽頁就會出來的頁面，可以使用精美天氣，待辦事項，歷史記錄管理，應用程序管理，印象筆記一樣的記事應用，高清壁紙，必應，百度，谷歌搜索。我最常用的功能是代辦事項，而且應用程序管理會呈現你pin 到桌面的PWA 應用，以及你現在的所有Chrome 擴展情況，比從Chrome 的settings 里面打開要快捷方便很多。

image.png

Lighthouse

Lighthouse 是谷歌出的一款插件，如今已經集成到dev tools 的Audits 這一欄，可以用來審計網站的性能，以及是否符合PWA 標準等。支持常見的頁面加載時間統計，比如首屏內容時間，首屏響應時間（TTI）等等，并且對應提出解決方法。比如

• 去除render-blocking 的資源，大量js 文件可以放到body 最后，body最好是SSR 的占位內容

• 打開Gzip，這一點對于js 等文本內容來說非常關鍵，往往可以達到節省70%帶寬的效果

• 而針對圖片資源只需要合適的格式即可，比如新一代的jpg2000，webp等格式，而不是采用png 這種壓縮率不高的格式

• 首屏外的資源可用懶加載，代碼拆分

Lighthouse 提供的建議

PS ：vue-cli3.x

最近推出的vue-cli3.x 讓我覺得眼前一亮，雖然之前iview 團隊也有做cli GUI的工具，但是這次的vue-cli 確實做了架構上的修改，其實也有借鑒react cli 的特點，把該封裝的東西隱藏起來了，讓開發可以更簡便的搭建項目。。就連配置typescript， pwa 等等都是一鍵生成，效率實在非常高。

ts+pwa+vue+router 空項目prod打包

并且新一代cli 已經內置了比較完善的webpack 配置，讓prod 版本的打包用到代碼拆分，tree shaking等策略。一個ts + pwa + vue+router 的起步項目可以做到50Kb 一下，后期加上各種業務模塊組件，中小型項目首屏資源做到200Kb以下還是很有希望的

希望這幾個插件有點幫助。