推荐几款不错的Chrome 插件

Chrome 的应用商店里真是商品琳琅满目,针对程序员有一些能够提升用户体验和工做效率的插件,好比在逛github 的时候。。 vue

Infinity 标签页

SourceGraph

国内访问: extfans.com/extension/d… 最先我是在Chrome 商店发现的,用了一下体验很是棒, 在github 上浏览项目能够实时看到code intelligence 推断出的变量类型,函数接口等等。react

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

Infinity新标签页

国内访问:extfans.com/extension/d…git

打开新标签页就会出来的页面,能够使用精美天气,待办事项,历史记录管理,应用程序管理,印象笔记同样的记事应用,高清壁纸,必应,百度,谷歌搜索。我最经常使用的功能是代办事项,并且应用程序管理会呈现你pin 到桌面的PWA 应用,以及你如今的全部Chrome 扩展状况,比从Chrome 的settings 里面打开要快捷方便不少。程序员

image.png

Lighthouse

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

  • 去除render-blocking 的资源,大量js 文件能够放到body 最后,body最好是SSR 的占位内容web

  • 打开Gzip,这一点对于js 等文本内容来讲很是关键,每每能够达到节省70%带宽的效果vue-cli

  • 而针对图片资源只须要合适的格式便可,好比新一代的jpg2000,webp等格式,而不是采用png 这种压缩率不高的格式typescript

  • 首屏外的资源可用懒加载,代码拆分api

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如下仍是颇有但愿的

但愿这几个插件有点帮助。