คู่มือการย้ายข้อมูล Lighthouse v3

คำแนะนำนี้มีไว้สำหรับผู้ใช้ Lighthouse v2 ที่มีคุณสมบัติดังนี้

  • เรียกใช้ Lighthouse จากโหนดหรือบรรทัดคำสั่ง
  • ใช้เอาต์พุต JSON ของ Lighthouse

หากไม่ตรงกับกรณีของคุณ เวิร์กโฟลว์ของการเรียกใช้ Lighthouse จะเหมือนกันเป็นส่วนใหญ่ โปรดดูประกาศเกี่ยวกับ Lighthouse 3.0 สำหรับภาพรวมของ ฟีเจอร์และการเปลี่ยนแปลงต่างๆ

การเปลี่ยนแปลงคำขอ

ตอนนี้ Lighthouse จะคํานวณประสิทธิภาพที่จำลองไว้โดยค่าเริ่มต้น และการตั้งค่าการควบคุมได้เปลี่ยนแปลงไปอย่างมาก

แฟล็ก CLI

สถานการณ์ Flag ของ v2 แฟล็ก v3
การควบคุม 3G ของเครื่องมือสำหรับนักพัฒนาเว็บ ไม่มี (ลักษณะการทำงานเริ่มต้น) --throttling-method=devtools
ไม่มีการควบคุม --disable-network-throttling --disable-cpu-throttling --throttling-method=provided
การควบคุมเครือข่าย ไม่มีการควบคุม CPU --disable-cpu-throttling --throttling-method=devtools --throttling.cpuSlowdownMultiplier=1
เรียกใช้การตรวจสอบประสิทธิภาพ --perf --preset=perf
เรียกใช้การตรวจสอบเนื้อหาผสม --mixed-content --preset=mixed-content

โมดูลโหนด

ใน Lighthouse v3 โมดูล Node จะยอมรับตัวเลือกการกําหนดค่าเดียวกับ CLI นี่คือ เกิดการเปลี่ยนแปลงที่ส่งผลกับส่วนการที่ตัวเลือกจำนวนมากเหล่านี้ถูกละเว้นใน v2 ส่งผลต่อวิธีการทำงานของ Lighthouse จริงๆ

const fs = require('fs');
const lighthouse = require('lighthouse');

async function run() {
  // `onlyCategories` was previously only available as a config setting.
  // `output` was previously only available in CLI.
  const flags = {onlyCategories: ['performance'], output: 'html'};
  const html = (await lighthouse('https://google.com/', flags)).report;
  fs.writeFileSync('report.html', html);
}

การเปลี่ยนแปลงเอาต์พุต

รูปแบบใหม่ระดับสูงสุดในเอาต์พุต JSON

ตอนนี้ออบเจ็กต์ JSON ที่ Lighthouse v3 แสดงผลจะมีพร็อพเพอร์ตี้ระดับบนสุด 3 รายการ ได้แก่

  • lhr ผลการตรวจสอบ ย่อมาจาก "Lighthouseผลการค้นหาของ Lighthouse" นี่เป็นออบเจ็กต์ระดับบนสุดในเวอร์ชัน 2 แต่เวอร์ชัน 3 ก็มีการเปลี่ยนแปลงรูปแบบของออบเจ็กต์นี้ด้วย โปรดดู การเปลี่ยนแปลงออบเจ็กต์ผลลัพธ์
  • artifacts ข้อมูลที่รวบรวมจาก Chrome ขณะตรวจสอบ ก่อนหน้านี้มีผลกระทบ ด้วยคุณสมบัติของ LHR
  • report. รายงาน HTML/JSON/CSV ที่มีการจัดรูปแบบเป็นสตริง

การเปลี่ยนแปลงออบเจ็กต์ผลลัพธ์

ดังที่กล่าวไว้ในรูปแบบระดับบนสุดแบบใหม่ในเอาต์พุต JSON ผลการตรวจสอบจะเป็นดังนี้ พร้อมใช้งานผ่านพร็อพเพอร์ตี้ lhr ใน v2 เนื้อหาของออบเจ็กต์นี้โดยพื้นฐานแล้วคือเอาต์พุต JSON ระดับบนสุด อย่างไรก็ตาม รูปร่างของออบเจ็กต์นี้ได้มีการเปลี่ยนแปลงในเวอร์ชัน 3 ตารางด้านล่าง จะแสดงการเปลี่ยนแปลงทั้งหมด

  • หากแถวมีค่าทั้งในคอลัมน์ v2 และ v3 หมายความว่า ที่คุณควรแทนที่การอ้างอิงใดๆ กับพร็อพเพอร์ตี้ v2 ในโค้ดของคุณด้วยค่าเทียบเท่า v3
  • เมื่อแถวไม่มีค่าในคอลัมน์ v3 คอลัมน์หมายเหตุจะ ตัวเลือกของคุณ
  • โปรดทราบว่ารายการต่างๆ เช่น ID จะแสดงถึงข้อความตัวยึดตำแหน่ง
พร็อพเพอร์ตี้ v2 เทียบเท่า v3 หมายเหตุ
initialUrl requestedUrl
url finalUrl
generatedTime fetchedTime
reportCategories categories เปลี่ยนจากอาร์เรย์เป็นออบเจ็กต์ที่คีย์แล้ว
reportGroups categoryGroups
audits.ID.name audits.ID.id
audits.ID.description audits.ID.title
audits.ID.helpText audits.ID.description
audits.ID.scoringMode audits.ID.scoreDisplayMode ค่าที่เป็นไปได้ได้ขยายเป็น numeric|binary|manual|informative|not-applicable|error
audits.ID.score audits.ID.score คะแนนจะเป็นตัวเลขระหว่าง 0 ถึง 1 (ไม่ใช่ 0-100) เสมอเมื่อ scoreDisplayMode คือ ตัวเลขหรือฐานสอง คะแนนจะเป็น null เสมอสำหรับโหมดการแสดงผลอื่นๆ เนื่องจากไม่มีคะแนน ว่าผ่าน/ไม่ผ่าน
audits.ID.displayValue audits.ID.displayValue ตอนนี้คุณสามารถเป็นอาร์เรย์ของอาร์กิวเมนต์รูปแบบ Printf สำหรับการประมาณค่าสตริง
audits.ID.debugString audits.ID.explanation audits.ID.errorMessage audits.ID.warnings ระบบได้แปลงค่า debugString เป็นพร็อพเพอร์ตี้อย่างใดอย่างหนึ่งจาก 3 รายการข้างต้นแล้ว โดยขึ้นอยู่กับความตั้งใจของค่า
audits.ID.details audits.ID.details โครงสร้างของรายละเอียดเปลี่ยนไปเพื่อให้ใช้งานได้ง่ายมากขึ้น แต่ละรายการใน .items เป็นออบเจ็กต์ที่มีคีย์ที่เชื่อถือได้แทนที่จะเป็น any[]
audits.ID.error audits.ID.scoreDisplayMode === 'error'
audits.ID.notApplicable audits.ID.scoreDisplayMode === 'not-applicable'
audits.ID.informative audits.ID.scoreDisplayMode === 'informative'
audits.ID.manual audits.ID.scoreDisplayMode === 'manual'
audits.ID.extendedInfo นำออกแล้ว ให้ใช้ details แทน