[PWA渐进式门户开发技术-面向未来的WEB构建技术专题]

浏览手册 在逐浪CMS中开发PWA > 逐浪CMS中开发PWA开发的视频教程 >

使用 Lighthouse 审查 WebApp

      Lighthouse 是一个开源的自动化工具,用于评价 WebApp 多方面的效果指标,并给出建议以帮助开发者改进 WebApp 的质量。

你可以通过2种方式来安装并使用 Lighthouse

  1. Chrome 插件形式: Lighthouse - Chrome 网上应用商店

  2. 命令行形式: npm install -g lighthouse

为 Lighthouse 提供一个你要审查的网址,它将针对此页面运行一连串的测试,然后生成一个有关页面性能的报告。通过报告你可以看看可以采取哪些措施来改进您的应用。

注:Lighthouse 目前非常关注 Progressive Web App 功能,如添加到主屏幕离线支持。不过,此项目的首要目标是针对网络应用质量的各个方面提供端到端审查。

使用入门

前面说过使用 Lighthouse 的两种方式,各有适用场景。Chrome 插件的形式提供了更加友好的用户界面,方便读取报告。而命令行工具则方便将 Lighthouse 集成到持续集成系统。

Chrome 插件

下载 Google Chrome 52 或更高版本。

安装 Ligthouse Chrome 插件

打开需要进行审查的页面,并点击 Chrome 工具栏上的 Lighthouse 图标icon

如果在工具栏上没有看到此图标,它可能隐藏在 Chrome 的主菜单中。

点击此图标后,你会看到一个展开菜单,如下图

menu

在 Options 选项里,可以选择需要的审查项。

menu

点击 Generate report 按钮以针对当前打开的页面运行 Lighthouse 测试。

在完成审查后,Lighthouse 将打开一个新标签,并在页面的结果上显示一个报告。

report

在这里,你就能看到关于 PWA, Performance, Accessibility, Best Practices 四个方面存在的问题以及相关建议。根据这些去优化你的站点吧!

命令行工具

安装 Node,需要 5 及以上版本。

以全局方式安装:

1npm install -g lighthouse

针对一个页面运行 lighthouse 命令,进行审查:

1lighthouse https://www.example.com/

输入 --help 选项可以查看可用的输入、输出选项

1lighthouse --help

mode_edit编辑 feedback反馈


+什么是CMS

CMS(Content Management System)是网站内容管理系统简称, 互联网上每个网站(无论大小门户)其后台都由专业CMS系统支撑- Zoomla!逐浪CMS作为国内高端CMS与WEB应用典范,首创第3代CMS理念,专注底层核心技术研发,以云技术、创新精神构建行业新成就,提供从网站内核到电商、办公、移动一体化的开发体验!

7×24小时服务热线 021-50391046 技术支持:13177777714
Copyright © 逐浪软件z01.com版权所有 All rights reserved
中华人民共和国网警备案号:3601040103 经营许可证号:工商3601002021063 沪ICP备09077823号
本网站基于®Zoomla!逐浪CMS内核开发

ISO9001国际认证企业 CSDN外包TOP资质 鉴赏MTV电广视告 7×24小时全天候贴心服务 社会征信网 网络110