프로그레시브 웹 애플리케이션에 대한 등대 감사 자동화

우리 모두는 웹 애플리케이션을 개발할 때 등대 감사에서 얻은 통찰력이 얼마나 중요하고 도움이 되는지 알고 있습니다. 그러나 우리 대부분이 확인하는 방법은 Chrome 개발자 도구나 등대 확장 프로그램을 통해 수동으로 확인하는 것입니다. 제 생각에는 그다지 생산적이지 않습니다.

모르는 분들을 위해 Lighthouse를 사용하여 웹 애플리케이션을 감사하는 방법에는 주로 네 가지가 있습니다.

Chrome 개발자 도구

명령줄

NPM 모듈(잠시 사용 예정)

PageSpeed Insights

프로그래밍 방식으로 Lighthouse 감사를 수행하기 위해 테스트 작성에 lighthouse npm package , mocha 및 chai을 사용하고 Lighthouse 테스트 실행에 chrome-launcher을 사용합니다.

먼저 위의 패키지를 프로젝트에 dev 종속성으로 설치해 보겠습니다.

npm install lighthouse chrome-launcher chai mocha --save-dev

이제 lighthouse.tests.js 디렉토리에 tests라는 파일을 생성해 보겠습니다. 이 파일을 통해 등대 감사를 실행할 것입니다.
여기에서 우리는 등대 모듈과 크롬 런처를 가져올 것입니다. 이를 통해 로컬 개발 서버에서 웹 페이지를 열고 감사를 실행하여 우리가 원하는 등대 점수의 최소 임계값에 대해 테스트할 수 있습니다.

이것은 많은 일처럼 들릴지 모르지만 그리 많지 않습니다. 실제 코드에서는 다음과 같이 표시됩니다.

const lighthouse = require("lighthouse");
const chromeLauncher = require("chrome-launcher");

function launchChromeAndRunLighthouse(url, opts, conf = null) {
  return chromeLauncher
    .launch({ chromeFlags: opts.chromeFlags })
    .then(chrome => {
      opts.port = chrome.port;
      return lighthouse(url, opts, conf).then(res =>
        chrome.kill().then(() => res.lhr)
      );
    });
}

그리고 그것은 그만큼 간단합니다. chromeLauncher.launch 메서드를 사용하여 Chrome 브라우저 인스턴스를 시작한 다음 감사를 위해 사이트 URL 및 구성을 사용하여 Lighthouse 테스트를 실행합니다. 완료되면 크롬 인스턴스를 닫거나 종료하고 결과를 반환합니다. 사용 중일 때의 모습입니다.

launchChromeAndRunLighthouse(testUrl, opts, config).then(res => {
  // Results are available in `res`
});

이제 이 호출을 테스트를 위한 before 후크 안에 넣은 다음 다음과 같이 각 메트릭에 대한 테스트를 가질 수 있습니다.

describe("Lighthouse Audits", function() {
  // Timeout doesn't need to be same. It can be more or less depending on your project.
  this.timeout(50000);
  let results;
  before("run test", done => {
    launchChromeAndRunLighthouse(testUrl, opts, config).then(res => {
      // Extract the results you need for your assertions.
      done();
    });
  });
  it("performance test", done => {
    // test your performance score against the threshold
    done();
  });
  // Some more tests..
});

여전히 이상해 보입니까? 괜찮아요! lighthouse tests with mocha의 예제 설정에 대해 이 리포지토리를 확인하고 웹 응용 프로그램에서 사용해 보십시오!

(this link을 통해 관련 프로젝트 목록을 찾을 수 있으며 jest를 사용한 예제도 포함되어 있습니다.)

이 방법은 연속 통합/배포 환경에서 테스트를 자동화하는 데 적용할 수 있으므로 웹 애플리케이션을 수동으로 감사하고 최소 만족 수준을 충족하는지 확인하는 것에 대해 걱정할 필요가 없습니다.

그래서 당신은 간다. 프로그레시브 웹 애플리케이션이 인터넷과 사용자의 데이터 패킷에 대해 항상 가치가 있는지 확인하기 위해 라이트하우스 감사를 자동화하기 위해 필요한 모든 것입니다!



읽어 주셔서 감사합니다! 😄

를 통해 저와 연결할 수도 있습니다.

행복한 해킹! 건배! 🎉