grunt.js로 성능 테스트를 자동화하십시오

키 테이크 아웃

<.> grunt.js 작업 러너는 웹 개발 프로세스 중에 성능 테스트를 자동화하는 데 사용하여 QA 프로세스에 성능 목표 또는 '예산'이 충족되도록합니다. Grunt PerfBudget 플러그인은 webpagetest.org API를 사용하여 페이지 가중치, 이미지 크기, 스크립트 중량 및 렌더링 시간과 같은 메트릭에 대한 사이트를 측정합니다. 개발자는 이러한 메트릭에 대한 명시적인 예산을 설정할 수 있으며 플러그인은 사이트를 측정합니다. grunt.js는 코드가 오류없이 효율적으로 실행되도록하는 작업을 자동화하여 시간을 절약하고 인적 오류의 위험을 줄이는 작업을 자동화하므로 성능 테스트에 중요합니다. 이것은보다 신뢰할 수 있고 고품질 소프트웨어로 이어집니다

이 연령대 2MB 웹 페이지에서 성능 예산은 웹 개발 프로세스의 필수 부분이되고 있습니다. 프로젝트의 이해 관계자와 협력하여 웹 사이트의 성능을위한 목표를 설정하는 모든 사람의 책임 - 디자이너 및 개발자 모두가되었습니다. 당신은 여러 가지 다른 메트릭에 대한 예산을 설정할 수 있습니다. 예를 들어, 대상 페이지 중량은 500 킬로바이트입니다. 프로젝트의 단일 페이지가 초과 할 수는 없습니다. 500KB를 초과하기 위해 페이지에 추가되는 요소는 설계에 포함을 결정하려면 페이지의 다른 요소에 대해 평가해야합니다. Tim Kadlec이 설명하는 것처럼, 귀하의 결정은 3 가지 경로 중 하나를 취해야합니다.

페이지에서 기존 기능 또는 자산을 최적화하십시오 페이지에서 기존 기능이나 자산을 제거하십시오 새로운 기능이나 자산을 추가하지 마십시오

kilobytes로 다운로드 한 총 이미지, 요청 당 제품 이미지 수 또는 WebPagetest.org에 따라 사이트의 평균 다운로드 시간에 대한 예산을 설정할 수도 있습니다. 예산을 설정 한 후에는 개발 단계 전체에서 사이트의 성과를 측정하는 것이 추가 작업입니다. QA 프로세스에 번거로운 수동 테스트를 추가하지 않고 어떻게이를 달성 할 수 있습니까? grunt.js! 를 입력하십시오 grunt.js webpagetest.org = 자동화 된 성능 테스트 bliss
• 웹 사이트 성능을 측정하는 데 도움이되는 많은 Grunt 플러그인이 있지만, 내가 찾은 가장 정확한 플러그인 인 Grunt Perfbudget에 중점을 둡니다. 이 멋진 Grunt 작업은 WebPagetest.org API를 사용하여 페이지 중량, 이미지 크기, 스크립트 가중치 및 렌더링 시간과 같은 유용한 메트릭에 비해 사이트를 측정합니다. 플러그인이 사이트를 측정 할 수있는 이러한 메트릭에 대한 명시적인 예산을 설정할 수도 있습니다! API 키를 얻으십시오 Grunt 작업을 설정하기 전에 GruntFile에 포함 할 API 키를 위해 WebPagetest.org에게 이메일을 보내야합니다. (좋은 소식 : 작품에는이 과정에 대한 대안이 있습니다!)
Grunt PerfBudget 플러그인을 설치하십시오 이번이 처음으로 Grunt를 사용하는 경우 Grunt와 함께 일어나고 달리는 것에 대한 튜토리얼을 확인하십시오.

. 컴퓨터에 이미 Grunt를 설치 한 경우 성능 테스트를 설정하기 전에 PerfBudget 플러그인을 설치하면됩니다. 명령 줄을 통해 프로젝트 폴더로 이동하고 실행하십시오 :

또는 샘플 프로젝트를 수행하려면 내 Github 저장소, Grunt-Perfbudget-Demo 및 NPM 설치를 실행하여 진행하십시오.

perfbudget 태스크 를 구성하십시오 플러그인을 설치 한 후에는 플러그인 옵션을 설정하고 gruntfile.js에서 작업을 만들어야합니다. 기본 grunt 명령의 일부로 PerfBudget 작업을 실행하는 데모 GruntFile을 만들었습니다. 시작할 최소 옵션 만 테스트 할 URL 및 API 키를 시작합니다.

API 키 세트로 기본 grunt 작업을 실행하면 콘솔에서 다음 출력을 얻습니다.

npm install grunt-perfbudget --save-dev

왜 내 작업이 실패 했습니까? 내 웹 사이트가 기본 예산을 전달하지 않았기 때문에 : 렌더링은 1000m 미만입니다. 또한 "Speedindex"라는 메트릭에서도 실패했습니다. 내 웹 페이지의 성능에 대해 더 자세히 알아 보려면 어떻게해야합니까? 운 좋게도 WebPagetest는 PerfBudget 테스트에서 콘솔에서 직접 연결된 매우 상세한 URL을 가지고 있습니다! 내 웹 사이트를 통과시키고 Grunt 작업이 실패하지 않기 위해 (따라서 자동화 된 빌드 환경에서 웹 사이트 빌드를 중지) 두 가지 옵션이 있습니다. 전달할 때까지 예산을 편집 할 수 있습니다 (테스트에 유용하고, 테스트에 유용합니다. 성능에별로 그렇지 않습니다!) 또는 기본 메트릭을 전달할 때까지 내 성과 예산 규칙을 ​​따라갈 수 있습니다. 지금은 지나가는 작업을 통해 지나가는 테스트가 어떻게 보이는지 봅시다.

PerfBudget 옵션 및 WebPageTest 메트릭 대부분의 grunt 작업과 마찬가지로 PerfBudget 작업을 통해 다양한 옵션을 사용자 정의 할 수 있습니다. 그리고 WebPageTest로 측정 된 놀랍도록 상세한 메트릭으로 인해 성과 예산에 대한 모든 종류의 메트릭을 테스트하여 통과 여부를 확인할 수 있습니다. 먼저, 웹 사이트가 실패하지 않고 예산을 책정하는 Grunt 작업 보고서가 옵션을 변경하겠습니다. 이를 위해서는 '예산'이라는 PerfBudget 작업에 추가 부동산이 필요합니다.

이 시점에서 내 사이트가 매우 느리기 때문에 테스트를 통과하기 위해 내 값이 높습니다. 결과? 나는 지나갔다!
이것은 Grunt 과제가 실패하지 않으며 GruntFile에 다른 작업이 있으면 정상적으로 진행됩니다 - 성공! . 기본 메트릭 외에도 무엇을 측정 할 수 있습니까? 다음을 포함한 모든 종류의 물건
로드 타임 : 밀리 초의 총 하중 시간 요청 : 요청 된 총 파일 수 바이트 신 : 바이트의 총 페이지 중량
• 마지막 메트릭은 내가 가장 일반적으로보고하고 예산 책정 목적으로 추적하려는 메트릭이므로 측정 방법을 살펴 보겠습니다.
나는이 시점의 평균 페이지 중량이 2 메가 바이트 미만의 주위를 가져 오기 때문에 총 바이트 예산을 2 백만으로 선택했습니다. 예산 옵션을 편집 한 후에는 Grunt 작업을 다시 실행하여 어떻게하는지 알 수 있습니다.
내 웹 사이트가 3 메가 바이트에서 시계를 두어 예산을 초과합니다! 할 일이 좀있는 것 같습니다. 그러나이 정보를 손에 넣는 것은 개발자로서 저에게 매우 유용합니다. 다른 Grunt 플러그인은 가볍고 테스트하기 쉬운 방식으로 총 페이지 중량에 대한 정보를 제공하지 않습니다. 이러한 중요한 메트릭을 측정하면 를 코딩 할 때 개발 결정의 실제 영향을 볼 수 있으며 결과적으로 성능을 향상시키는 데 도움이됩니다. grunt.js 로 성능 테스트를 자동화하는 것에 대한 질문이 자주 묻습니다 grunt.js 란 무엇이며 성능 테스트에 중요한 이유는 무엇입니까?
grunt.js는 미니 화, 컴파일, 단위 테스트 및 라이닝과 같은 반복적 인 작업을 자동화하는 JavaScript 작업 러너입니다. Node.js를 기반으로하며 명령 줄 인터페이스를 사용하여 GruntFile으로 알려진 파일에 정의 된 사용자 정의 작업을 실행합니다. Grunt.js는 개발자가 코드가 오류없이 효율적으로 실행되는 작업을 자동화 할 수 있기 때문에 성능 테스트에 중요합니다. 이것은 시간을 절약하고 인적 오류의 위험을 줄여서보다 신뢰할 수 있고 고품질 소프트웨어로 이어집니다.

성능 테스트를 위해 grunt.js를 설치하는 방법

npm install grunt-perfbudget --save-dev

grunt.js를 설치하려면, 여러분, 당신 먼저 시스템에 Node.js 및 NPM (Node Package Manager)이 설치되어 있어야합니다. 이 경우 터미널에서 npm install -g grunt -cli를 실행하여 Grunt.js를 설치할 수 있습니다. 시스템에 전 세계적으로 Grunt 명령 줄 인터페이스를 설치합니다. 그런 다음 Package.json 파일의 종속성으로 정의하고 NPM 설치를 실행하여 Grunt 및 Grunt 플러그인을 프로젝트에 추가 할 수 있습니다.

내 프로젝트에 대한 GruntFile을 어떻게 생성합니까?

GruntFile은 프로젝트의 루트 디렉토리에 들어가서 Grunt 작업에 대한 구성을 포함하는 JavaScript 파일입니다. gruntfile.js 또는 gruntfile.coffee로 명명되었으며 JavaScript 또는 CoffeeScript로 작성되었습니다. GruntFile을 만들려면 Grunt 런타임 인스턴스가 전달되는 래퍼 함수를 ​​정의 하고이 기능 내에서 Grunt 플러그인을로드하고 작업 구성 및 사용자 정의 작업을 등록 할 수 있습니다. . grunt.js로 자동화 할 수있는 몇 가지 일반적인 작업은 무엇입니까?

grunt.js는 성능 테스트 및 코드 최적화와 관련된 광범위한 작업을 자동화 할 수 있습니다. 여기에는 크기를 줄이기 위해 JavaScript 및 CSS 파일을 조정하고 CSS로 적은 및 SASS 파일을 컴파일하고, 오류 및 코딩 표준을 포착하기 위해 JavaScript 코드를 줄이고, 코드 테스트를 실행하여 코드가 예상대로 작동하는지 확인하고 파일 수를 줄이기 위해 단위 테스트를 실행합니다. http 요청.
grunt.js를 사용하여 성능 테스트를 자동화하려면 어떻게해야합니까?
성능을 자동화 할 수 있습니까? grunt.js로 테스트하면 미니 화를 위해 Grunt-Contrib-Iglify, CSS 미니 화를위한 Grunt-Contrib-CSSMIN, Linting을위한 Grunt-Contrib-Jshint 및 단위 테스트를위한 Grunt-Contrib-Qunit과 같은 플러그인을 사용할 수 있습니다. NPM을 통해이 플러그인을 설치하고 grunt.loadnpmtasks ()로 gruntfile에로드 한 다음 grunt.initconfig () 메소드에 속성을 추가하여 구성하십시오. 그런 다음 grunt 을 사용하여 명령 줄에서 작업을 실행할 수 있습니다. 다른 작업을 호출하는 작업을 정의하여 grunt.js. GruntFile에서 Grunt.registertask ()를 사용하여 지정된 순서대로 여러 작업을 실행하는 작업을 정의 할 수 있습니다. 예를 들어, grunt.registertask ( 'default', [ 'jshint', 'qunit', 'uglify']); Jshint, Qunit 및 Uglify 작업을 순서대로 실행할 것입니다.
Grunt 작업의 동작을 사용자 정의 할 수 있습니까?

옵션을 Grunt에게 전달하여 Grunt 작업의 동작을 사용자 정의 할 수 있습니다. .initConfig () GruntFile의 메소드입니다. 각 작업에는 동작을 제어하는 ​​옵션 세트가 있으며 작업의 구성 객체에 지정할 수 있습니다. 예를 들어, uglify 작업에는 JavaScript 코드가 어떻게 미수되는지 제어하는 ​​Mangle, 압축 및 미화를위한 옵션이 있습니다.

Grunt 프로젝트에서 package.json 파일의 역할은 무엇입니까?

Grunt 프로젝트의 package.json 파일은 프로젝트의 종속성을 관리하는 데 사용됩니다. 프로젝트가 실행 해야하는 Grunt 플러그인 및 기타 NPM 패키지를 나열합니다. NPM 설치를 실행하면 NPM은 Package.json 파일을보고 나열된 패키지를 설치합니다. 이로 인해 프로젝트의 종속성을 쉽게 관리하고 공유 할 수 있습니다.

다른 테스트 프레임 워크와 함께 grunt.js를 사용할 수 있습니까?

예, grunt.js는 광범위한 테스트 프레임 워크와 호환됩니다. Mocha, Jasmine 및 Qunit과 같은 인기있는 테스트 프레임 워크를위한 Grunt 플러그인이 있으며 다른 프레임 워크와 함께 테스트를 실행하기 위해 사용자 정의 작업을 작성할 수도 있습니다. 이로 인해 Grunt.js는 성능 테스트 자동화를위한 다목적 도구입니다.

성능 테스트를 위해 grunt.js를 사용하기위한 몇 가지 모범 사례는 무엇입니까?
성능 테스트에 grunt.js를 사용하기위한 몇 가지 모범 사례에는 Gruntfile을 깨끗하게 유지하고 여러 파일로 분할하여 구성하는 것이 포함됩니다. -verbose 플래그에서 세부적인 출력을 얻기 위해 작업을 실행하고-포스 플래그를 사용하여 작업이 실패하더라도 작업을 계속 실행합니다. 또한 최신 기능 및 버그 수정을 얻기 위해 Grunt 플러그인을 정기적으로 업데이트하는 것이 좋습니다.

위 내용은 grunt.js로 성능 테스트를 자동화하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!