NodeJS Lighthouse Gulp를 사용하여 자동화된 웹사이트 성능 테스트 도구를 구축하는 방법
이 글은 자동화된 웹사이트 성능 테스트 도구를 구축하기 위해 NodeJS Lighthouse Gulp를 사용하는 방법을 주로 소개합니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다.
아직 Lighthouse가 무엇인지 모른다고 가정하면 Lighthouse는 웹 사이트 품질을 자동으로 감지할 수 있는 Google 소유의 오픈 소스 도구로, 친숙한 인터페이스, 간단한 조작, 다양한 사용 방법 및 포괄적인 관점을 갖추고 있습니다. 일반 사용자도 테스트, QA, 개발 모두 빠르게 사용할 수 있습니다.
시작 상태 난이도 1 Lighthouse를 사용하는 방법은 다양합니다. 가장 간단한 방법은 Chrome의 개발자 도구를 사용하는 것입니다.
Chrome 브라우저를 엽니다.
F12 누르기
팝업 창에서 감사 탭 열기
감사 수행...모두 선택 클릭
감사 실행
난이도 2에서는 명령줄을 사용할 수도 있습니다.
노드 설치
Lighthouse 설치 npm install -g lighthouse
명령줄에서 lighthouse lt;
둘 다 실행합니다. 위의 사용 방법은 이 글의 초점이 아닙니다. 더 자세히 알고 싶다면 DevTools에서 Run Lighthouse를 참조하세요.
난이도 3. 최근 NodeJS를 배우고 있기 때문에 사용하기로 결정했습니다. Lighthouse를 실행하는 노드 8 Gulp 정확성을 위해 각 작업은 Lighthouse를 10번 실행하고 결과 표시기의 첫 번째 의미 있는 페인트 밀리초에만 관심을 갖습니다. 시각화 및 가독성을 위해 최종 결과는 웹 페이지 형식으로 표시되며, 사용자는 웹 페이지에서 Lighthouse를 실행할 때마다 처음으로 의미 있는 페인트의 시간(밀리초)을 확인할 수 있습니다. 사용자가 특정 실행의 세부 사항에 관심이 있는 경우 링크를 클릭하여 볼 수 있습니다. 최종 결과는 다음과 같습니다:
Node 8의 환경 설정 및 설치
종속성 패키지 설치
npm i lighthouse --save-dev
npm i chrome-launcher --save-dev
npm i fs-extra --save-dev
npm i gulp --save-dev 구성은 다음에 생성됩니다. 프로젝트 루트 디렉터리 Lighthouse의 구성 파일 lighthouse-config.js, 여기서는 모두 기본 구성을 사용합니다. 기본 구성을 사용하려면 구성 파일에서 'lighthouse: default'를 선언해야 합니다.
module.exports = {
Extensions: 'lighthouse: default'
}독자가 더 자세한 구성 옵션을 알고 싶다면 다음을 참조하세요.
p >Lighthouse 이 글의 대부분은 명령줄에 관한 것입니다. 명령줄 매개변수는 노드에도 사용될 수 있습니다.
제한 이 글은 네트워크 시뮬레이션에 관한 것입니다.
기본 구성 특정 기본값 구성 매개변수
웹 페이지 테스트는 다양한 네트워크 속도를 시뮬레이션합니다.
에뮬레이션은 다양한 장치를 시뮬레이션합니다.
코딩은 프로젝트 루트 디렉터리에 gulpfile.js를 생성하고 먼저 모든 종속 도구를 도입합니다. :
const gulp = require('gulp');
const lighthouse = require('lighthouse');
const chromeLauncher = require( 'chrome- launcher');
const 프린터 = require('lighthouse/lighthouse-cli/printer');
const Reporter = require('lighthouse/lighthouse-core/report /report- Generator');
const fs = require('fs-extra');
const config = require('.lighthouse-config.js') 처음에 사용하기 전에 lighthouse, 먼저 사용자 정의 보고서 파일을 생성하기 위해 파일 쓰기 메서드를 만듭니다.
async function write(file, report) {
try {
p >
wait fs.outputFile(file, report);
} catch (오류 e) {
console.log("보고서 작성 중 오류가 발생했습니다. ", e); /p>
}
}Lighthouse를 호출하기 전에 먼저 Chrome 인스턴스를 시작하고 Lighthouse에 포트 번호를 제공해야 합니다. --headless는 브라우저 창을 열지 않음을 의미합니다.
비동기 함수 launchChrome() {
let chrome;
try {
chrome = wait chromeLauncher.launch({
chromeFlags: [
"--disable-gpu",
"--no-sandbox",
"--headless"
],
활성화Extensions: true,
logLevel: "error"
})
콘솔. log(chrome.port)
return {
포트: chrome.port,
chromeFlags: [
"--headless"
],
logLevel: "오류"
}
} catch (e) {
콘솔 .log("Chrome 실행 중 오류가 발생했습니다. ", e);
}
}Chrome 인스턴스가 시작된 후 Lighthouse를 호출할 수 있습니다. 호출 시 다음 정보를 제공해야 합니다. 성능 테스트가 필요합니다. 매개변수에는 Chrome 시작 포트, 시작 모드(헤드리스 여부 등)가 포함됩니다.
async function lighthouseRunner(opt) {
try {
return wait lighthouse("", opt, config);
} catch (e) {
console.log("Error while running lighthouse");
}
}Lighthouse의 반환 결과는 성능을 포함하는 메시지입니다. 테스트 결과, 구성 매개변수 최종 버전의 json 객체, 표시기 그룹화 및 기타 정보에 대한 자세한 내용은 결과 이해를 참조하세요.
보고서를 생성하려면 공식 Lighthouse 템플릿을 사용해야 하므로 공식 메소드를 호출합니다. 첫 번째 매개변수는 result.lhr에 전달되고 두 번째 매개변수는 html 보고서를 생성하기 위해 선언됩니다. (csv는 다른 형식으로 보고서를 생성할 수도 있습니다).
function genReport(result) {
return Reporter.generateReport(result.lhr, 'html');
} 위의 내용을 결합한 함수를 작성해 보겠습니다. 메소드로 묶인 함수로, 먼저 Chrome 인스턴스를 시작한 다음 Chrome 인스턴스의 특정 매개변수를 Lighthouse에 전달하고 Lighthouse에서 실행한 결과를 사용하여 보고서를 생성한 다음 html 파일에 타임스탬프가 있어야 합니다. 및 실행 순서를 고유 식별자로 사용합니다. start 메소드는 결과에서 가장 먼저 의미 있는 페인트를 반환합니다(이것은 우리가 가장 우려하는 지표입니다. 독자는 자신의 필요에 따라 교체할 수 있습니다. 특정 지표에 대해서는 Lighthouse를 참조하십시오).
async function run(timestamp, num) {
let chromeOpt = waitChrome()
let result = wait lighthouseRunner(chromeOpt); >
보고서 = genReport(결과);
wait Printer.write(report, 'html', `./cases/lighthouse-report@${timestamp}-${num}.html `);
return result.lhr.audits['first-meaningful-paint'].rawValue;
wait chrome.kill();
} 다음으로 공식적으로 gulp 작업 작성을 시작할 수 있습니다. 먼저 최종 생성된 보고서의 이름을 지정하기 위한 현재 타임스탬프를 가져온 다음 Lighthouse가 실행될 때마다 생성된 첫 번째 의미 있는 페인트 밀리초를 기록하는 배열을 선언한 다음 Lighthouse를 실행합니다. 는 미리 생성된 템플릿 파일을 이용하여 10번 실행하였고, 이 10번의 결과를 바탕으로 요약 보고서가 생성되었습니다. 여기서 작성자는 문자열을 대체하기 위해 Lighthouse에서 제공하는 도구 기능을 사용했습니다.
gulp.task('start', async function() {
let timestamp = Date.now();
let sent = [];
for(let i=0; ilt; 5; i) {
sent.push(await run(timestamp, i))
}
let template = wait fs.readFileSync('./summary/template/template.html', 'utf-8')
let summary = Reporter.replaceStrings(template, [{
검색: 'TIME_SPENT',
대체: JSON.stringify(spent)
}, {
검색: 'TIMESTAMP' ,
교체: 타임스탬프
}])
write(`./summary/report/summary@${timestamp}.html`, 요약)
}) 마지막으로 다음을 실행합니다:
gulp start 그러면 모든 것이 잘 될 것입니다.
첨부된 내용은 요약 인터페이스의 템플릿 소스 코드입니다:
lt;!doctype htmlgt;
lt;html lang="en"gt;
lt;
lt;meta charset="utf-8"gt;
lt;meta name="viewport" content="width=device- width,initial -scale=1,Minimum-scale=1"gt;
lt; titlegt; Lighthouse 요약 보고서lt; /titlegt;
lt; stylegt;
본문 {
글꼴 계열:
}
테이블 {
여백: 자동; >
}
tr {
테두리: 1px 단색 회색
}
h1 {
텍스트 정렬: 중앙;
여백: 30px 자동 50px 자동
}
lt;/stylegt;
lt;/ headgt;
lt;bodygt;
lt;tablegt;
lt;h1gt;성능 요약 보고서lt;/h1gt;
lt ;trgt;
lt;thgt;
사건 번호
lt;/thgt;
lt;thgt;
첫 번째 의미 있는 페인트
lt;/thgt;
lt;thgt;
세부정보 링크
lt;/ thgt;
lt;/trgt;
lt;tbody id="tableBody"gt;
lt;/tbodygt;
lt;/ tablegt;
lt;scriptgt;
let timepent = TIME_SPENT;
let timestamp = TIMESTAMP;
let tableBody = document.getElementById ("tableBody");
let content = '';
for(let i=0; i lt; timespent.length; i) {
content = `lt;tr style="border: 1px solid grey"gt;
lt;tdgt;
${i 1}
lt;/ tdgt;
lt;tdgt;
${timespent[i]}
lt;/tdgt;
lt ;tdgt;
lt;a href="../../cases/lighthouse-report@${timestamp}-${i}.html"gt
;세부정보 보기lt;/agt;
lt;/tdgt;
lt;/trgt;`
}
let total = timespent.reduce((i, j) =gt; {
return i j;
})
let count = timespent.filter(function(i) { return i}).length
content = `lt;trgt;
lt;tdgt;
AVG
lt;/ tdgt;
lt;tdgt;
${total/count}
lt;/tdgt;
lt;/trgt; `
tableBody.innerHTML = content;
lt;/scriptgt;
lt;/bodygt;
lt;/htmlgt;