Chrome 的应用商店里真是商品琳琅满目，针对程序员有一些可以提高用户体验和工作效率的插件，比如在逛github 的时候。。

SourceGraph

国内访问： https://extfans.com/extension/dgjhfomjieaadpoljlnidmbgkdffpack 最早我是在Chrome 商店发现的，用了一下体验非常棒，在github 上浏览项目可以实时看到code intelligence 推断出的变量类型，函数接口等等。

还支持鼠标悬停，去查看变量的引用关系，特别对于class，方法定义和reference的检索，可以跳转到对应文件，简直就是快速代码查看器，但目前还不支持在线编辑和commit。如果可以对接github的api 接口，应该可以做得更强大吧。。这个项目也是开源的，项目地址，在issue 里搜索了一圈没看到关于提供编辑功能的issue，也许是大家都愿意clone 之后本地编辑吧。。

Infinity新标签页

国内访问：https://extfans.com/extension/dbfmnekepjoapopniengjbcpnbljalfg

打开新标签页就会出来的页面，可以使用精美天气，待办事项，历史记录管理，应用程序管理，印象笔记一样的记事应用，高清壁纸，必应，百度，谷歌搜索。我最常用的功能是代办事项，而且应用程序管理会呈现你pin 到桌面的PWA 应用，以及你现在的所有Chrome 扩展情况，比从Chrome 的settings 里面打开要快捷方便很多。

Lighthouse

Lighthouse 是谷歌出的一款插件，如今已经集成到dev tools 的Audits 这一栏，可以用来审计网站的性能，以及是否符合PWA 标准等。支持常见的页面加载时间统计，比如首屏内容时间，**首屏响应时间（TTI）**等等，并且对应提出解决方法。比如

去除render-blocking 的资源，大量js 文件可以放到body 最后，body最好是SSR 的占位内容
打开Gzip，这一点对于js 等文本内容来说非常关键，往往可以达到节省70%带宽的效果
而针对图片资源只需要合适的格式即可，比如新一代的jpg2000，webp等格式，而不是采用png 这种压缩率不高的格式
首屏外的资源可用懒加载，代码拆分

PS ：vue-cli3.x

最近推出的vue-cli3.x 让我觉得眼前一亮，虽然之前iview 团队也有做cli GUI的工具，但是这次的vue-cli 确实做了架构上的修改，其实也有借鉴react cli 的特点，把该封装的东西隐藏起来了，让开发可以更简便的搭建项目。。就连配置typescript， pwa 等等都是一键生成，效率实在非常高。

并且新一代cli 已经内置了比较完善的webpack 配置，让prod 版本的打包用到代码拆分，tree shaking等策略。一个ts + pwa + vue+router 的起步项目可以做到50Kb 一下，后期加上各种业务模块组件，中小型项目首屏资源做到200Kb以下还是很有希望的

希望这几个插件有点帮助。