windows命令行下快速使用lighthouse_chaihongjun.me|柴宏俊web技术笔记

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

另外一方面通过chrome的的扩展程序lighthouse似乎只能针对mobile应用做检测，没有模拟设备选项:

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

#!/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,但是常规情况下还是使用后者。