chaihongjun.me

windows命令行下快速使用lighthouse

lighthouse是google出品的开源工具,面向web应用特别是移动web应用(webapp)。它主要用来对Web应用通过页面性能,最佳实践,可访问性,SEO和PWA这四个方面做出综合检测并提出优化改进的建议。相当于是google对web页面的最佳实践指导了。由于负责的网站(pc+移动)比较的多,每天几乎都要通过lighthouse来检测,但是由于未知的原因,一方面互联网上介绍的,通过chrome的audits面板可以分别检测desktop和mobile应用的方式经常失灵,总是卡在"lighthouse is warming up ..."一动不动。

windows命令行下快速使用lighthouse

另外一方面通过chrome的的扩展程序lighthouse似乎只能针对mobile应用做检测,没有模拟设备选项:
windows命令行下快速使用lighthouse
于是乎上面两个方式都无法满足需求,最后只好通过cli的方式。
由于使用的是Win系统,所以,特意针对cli环境做了下优化:安装了cmder+gow,这两个东西搭配起来可以比较好的模拟linux系统环境。这里不赘述如何安装。后面想到如果能在Win环境下写一个脚本,脚本执行的时候只要输入必备的参数就可以执行检测,于是下面的代码给整出来的了。需要提醒的是,cmder启动选项请选择bash或者bash as admin模式(bash as admin极力推荐),这样脚本才可以执行:

windows命令行下快速使用lighthouse

windows命令行下快速使用lighthouse

#!/bin/bash

#提示“请输入需要审核的URL”,并把URL保存在变量url中
read -t 30 -p "请输入需要审核的URL(比如:https://chaihongjun.me/):" url
echo "需要审核的页面是:$url"
echo -e "
"
#提示“输入网址需要什么设备模拟访问”,并把输入的值保存在变量device中
read -t 30 -p "请输入需要模拟的方式desktop|mobile:" device
echo "页面通:$device来审核"
echo -e "
"
#提示“是否需要限制访问的网络”,并把输入的值保存在变量throttle中
read -t 30 -p "是否需要限制审核的网络:provided(表示当前设备环境,比如Win环境)|devtools|simulate(使用模拟手机设备):" throttle
echo "页面审核的网络限制方式:$throttle"
echo -e "正在准备启动检测,请稍后...
"
lighthouse $url  --emulated-form-factor=$device  --throttling-method=$throttle --locale --view

上面的代码整完之后,异常的高兴,但是有个问题,除了网址需要手动输入之外,其他的参数也需要手动打,而这些参数都是固定的N选一,于是想到脚本执行过程的交互内容是否可以更简便,让参数部分使用选项:

#!/bin/bash
#提示“请选择需要审核的URL”
read -t 30 -p "请输入需要审核的URL(比如:https://chaihongjun.me/):" url
echo "需要审核的页面是:$url"
echo -e "\n"
#提示 选择模拟设备
cat<<EOF
`echo -e "1)desktop"`
`echo -e "2)mobile"`
`echo -e "3)none"`
EOF
read -t 30 -p "请选择需要审核的网站类型:desktop(针对PC网站)|mobile(针对移动网站)|none(就是什么设备都不模拟,默认用你的chrome):" device
case $device in
    1)
      device=desktop
      ;;
    2)
      device=mobile
      ;;
    3)
      device=none
      ;;
    esac
echo "页面通过模拟:$device来审核"
echo -e "\n"
#提示 选择网络状态,是否限制网络
cat<<EOF
`echo -e "1)provided"`
`echo -e "2)devtools"`
`echo -e "3)simulate"`
EOF
read -t 30 -p "请选择网络限制策略:provided(表示当前设备环境,比如Win环境,不限制)|devtools(开发者模式)|simulate(使用模拟手机设备):" throttle
case $throttle in
    1)
      throttle=provided
      ;;
    2)
      throttle=devtools
      ;;
     3)
      throttle=simulate
      ;;
   esac
echo "页面审核的网络限制方式:$throttle"
echo -e "\n"
#提示是否需要在检测之前清除已有缓存
cat<<EOF
`echo -e "1)清除缓存(true)"`
`echo -e "2)不清除缓存(false)"`
EOF
read -t 30 -p "在检测前,是否清除已经存在的缓存文件?似乎设置与否没什么效果,因为会调用新的chrome实例检测:" clearCache
case $clearCache in
    1)
      clearCache=""
      ;;
    2)
      clearCache="--disable-storage-reset"
     ;;
     esac
if [[ $clearCache == "" ]]; then
       isCache="是"
else
       isCache="否"
fi
echo "检测前是否清除缓存?:$isCache"
echo -e "正在准备启动检测,请稍后...\n"
lighthouse $url --emulated-form-factor=$device --throttling-method=$throttle $clearCache --locale --view

于是上面的脚本成型了。这篇博客其实主要是涉及到linux的脚本编程内容,但是也需要提一下lighthouse有一个参数 --disable-device-emulation 有点类似 --emulated-form-factor=desktop,但是常规情况下还是使用后者。

windows命令行下快速使用lighthouse

windows命令行下快速使用lighthouse

等检测完毕之后会在调用脚本的目录下生成检测报告:

windows命令行下快速使用lighthouse


知识共享许可协议本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。作者:柴宏俊»