Automatikkan Ujian Prestasi dengan Grunt.js

Takeaways Key

Pelari tugas Grunt.js boleh digunakan untuk mengautomasikan ujian prestasi semasa proses pembangunan web, memastikan sasaran prestasi atau 'belanjawan' dipenuhi tanpa menambah ujian manual yang membebankan kepada proses QA.
• Plugin perfbudget grunt menggunakan API WebpageTest.org untuk mengukur tapak terhadap metrik seperti berat halaman, saiz imej, berat skrip, dan masa rendering. Pemaju boleh menetapkan belanjawan yang jelas untuk metrik ini, yang mana plugin akan mengukur tapak tersebut.
• grunt.js adalah penting untuk ujian prestasi kerana ia mengautomasikan tugas yang memastikan kod berjalan dengan cekap dan tanpa kesilapan, menjimatkan masa dan mengurangkan risiko kesilapan manusia. Ini membawa kepada perisian yang lebih dipercayai dan berkualiti tinggi.
Pada usia 2 MB laman web ini, belanjawan prestasi menjadi bahagian yang diperlukan dalam proses pembangunan web kami. Bekerja dengan pihak berkepentingan projek anda, ia menjadi tanggungjawab semua orang - pereka dan pemaju kedua -duanya - untuk menetapkan sasaran untuk prestasi laman web anda.

Anda mungkin menetapkan belanjawan untuk beberapa metrik yang berbeza: Sebagai contoh, berat halaman sasaran 500 kilobytes, yang tidak ada halaman dalam projek anda. Unsur -unsur yang akan ditambah ke halaman untuk melebihi 500KB perlu dinilai terhadap unsur -unsur lain di halaman untuk menentukan kemasukan mereka dalam reka bentuk. Seperti yang diterangkan oleh Tim Kadlec, keputusan anda mesti mengambil salah satu daripada 3 laluan:

Mengoptimumkan ciri atau aset sedia ada pada halaman

1. Keluarkan ciri atau aset sedia ada dari halaman
2. Jangan tambahkan ciri baru atau aset
Anda juga boleh menetapkan belanjawan untuk jumlah imej yang dimuat turun dalam kilobytes, bilangan imej produk setiap permintaan, atau masa muat turun purata untuk laman web anda mengikut WebpageTest.org.

Sebaik sahaja anda telah menetapkan belanjawan anda walaupun, ia adalah satu tugas tambahan untuk mengukur prestasi tapak anda sepanjang fasa pembangunan. Bagaimanakah anda dapat mencapai ini tanpa menambah ujian manual yang membebankan ke proses QA anda? Masukkan grunt.js!

grunt.js webpagetest.org = ujian ujian prestasi automatik

Walaupun terdapat beberapa plugin grunt yang membantu anda mengukur prestasi laman web anda, saya memberi tumpuan kepada yang paling tepat yang saya dapati: grunt perfbudget. Tugas Grunt yang indah ini menggunakan API WebpageTest.org untuk mengukur laman web anda terhadap satu tan metrik berguna seperti berat halaman, saiz imej, berat skrip, dan masa membuat. Anda juga boleh menetapkan belanjawan yang jelas untuk metrik ini bahawa plugin akan mengukur laman web anda terhadap!

memperoleh kunci API

Sebelum anda boleh mendapatkan tugas anda, anda perlu menghantar e -mel kepada WebpageTest.org untuk kunci API untuk dimasukkan ke dalam gruntfile anda. (Berita Baik: Ada alternatif untuk proses ini dalam kerja -kerja!)

Pasang plugin perfbudget grunt

Jika ini adalah kali pertama anda menggunakan Grunt, lihat tutorial saya untuk bangun dan berjalan dengan Grunt.

Jika anda sudah memasang pemasangan pada komputer anda, anda hanya perlu memasang plugin perfbudget sebelum kami menyediakan ujian prestasi kami. Navigasi ke folder projek anda melalui baris arahan dan jalankan:

npm install grunt-perfbudget --save-dev

atau jika anda ingin projek sampel untuk bekerja dengan, garpu repositori github saya, grunt-perfbudget-demo dan jalankan pemasangan NPM untuk pergi.

Konfigurasikan tugas perfbudget

Sebaik sahaja anda memasang plugin, anda perlu menyediakan pilihan plugin anda dan membuat tugas dalam gruntfile.js anda. Saya telah mencipta Demo Gruntfile yang menjalankan tugas perfbudget sebagai sebahagian daripada perintah grunt lalai, dengan hanya pilihan minimum untuk bermula - URL untuk menguji dan kunci API anda:

module<span>.exports = function(grunt){
</span>  <span>require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
</span>
  grunt<span>.initConfig({
</span>    <span>pkg: grunt.file.readJSON('package.json'),
</span>
    <span>perfbudget: {
</span>      <span>default: {
</span>        <span>options: {
</span>          <span>url: 'http://cfarman.com',
</span>          <span>key: 'APIKEY'
</span>        <span>}
</span>      <span>}
</span>    <span>}
</span>  <span>});
</span>
  grunt<span>.registerTask('default', ['perfbudget']);
</span><span>};</span>

Apabila saya menjalankan tugas grunt lalai dengan set kunci API saya, saya mendapat output berikut dalam konsol:

Mengapa tugas saya gagal? Kerana laman web saya tidak lulus belanjawan lalai: memberikan kurang dari 1000ms. Ia juga gagal dalam metrik yang dipanggil "SpeedIndex." Bagaimanakah saya mengetahui lebih lanjut mengenai prestasi laman web saya? Nasib baik, WebpageTest mempunyai URL yang sangat terperinci yang boleh saya rujukan, dihubungkan terus dari konsol dalam ujian perfbudget saya!

Untuk mendapatkan laman web saya untuk lulus dan tidak menyebabkan tugas mengerang gagal (oleh itu menghentikan mana -mana laman web yang dibina dalam persekitaran binaan automatik), saya mempunyai dua pilihan: Saya boleh mengedit belanjawan saya sehingga saya lulus (berguna untuk ujian, Tidak banyak untuk prestasi!) Atau saya boleh mengikuti peraturan anggaran prestasi saya: mengoptimumkan, mengeluarkan barangan atau berhenti menambah barangan sehingga saya lulus metrik lalai. Buat masa ini, mari kita bermain dengan tugas kami untuk melihat ujian lulus.

pilihan perfbudget dan metrik webpagetest

Seperti tugas yang paling mengerang, tugas perfbudget membolehkan saya menyesuaikan pelbagai pilihan. Dan kerana metrik yang sangat terperinci yang diukur oleh WebpageTest, saya dapat menguji semua jenis metrik untuk anggaran prestasi saya untuk melihat sama ada saya lulus atau gagal.

Pertama, saya akan menukar pilihan saya supaya laman web saya berhenti gagal dan laporan tugas yang mengerang saya di bawah anggaran. Ini memerlukan harta tambahan dalam tugas perfbudget saya yang dipanggil 'Bajet':

<span>perfbudget: {
</span>  <span>default: {
</span>    <span>options: {
</span>      <span>url: 'http://cfarman.com',
</span>      <span>key: 'APIKEY',
</span>      <span>budget: {
</span>        <span>render: '3000',
</span>        <span>SpeedIndex: '5500'
</span>      <span>}
</span>    <span>}
</span>  <span>}
</span><span>}</span>

laman web saya cukup lambat pada ketika ini jadi nilai saya tinggi untuk lulus ujian.

Hasilnya? Saya lulus!

Ini bermakna tugas mengerang tidak gagal dan jika saya mempunyai tugas lain dalam gruntfile saya, mereka akan meneruskan seperti biasa - Kejayaan!

Selain metrik lalai, apa lagi yang boleh kita ukur? Semua jenis barangan, termasuk:

• LOADTIME: Jumlah masa beban dalam milisaat
• Permintaan: Jumlah fail yang diminta
• bytesin: jumlah berat halaman dalam bait

Metrik terakhir adalah yang paling saya laporkan dan ingin menjejaki tujuan belanjawan, jadi mari kita lihat bagaimana untuk mengukurnya:

npm install grunt-perfbudget --save-dev

Saya memilih bajet total sebanyak 2 juta, kerana berat halaman purata pada masa ini berlegar di bawah 2 megabait. Sebaik sahaja saya mengedit pilihan belanjawan, saya dapat melihat bagaimana saya lakukan dengan menjalankan tugas mengerang lagi:

jam laman web saya di 3 megabait, meletakkannya lebih daripada anggaran! Nampaknya saya mempunyai kerja yang perlu dilakukan. Tetapi, mempunyai maklumat ini di tangan sangat berguna kepada saya sebagai pemaju. Tiada plugin grunt yang lain memberikan maklumat mengenai jumlah berat halaman dalam cara yang ringan dan mudah. Mengukur metrik penting ini membolehkan saya melihat kesan sebenar keputusan pembangunan

kerana saya pengekodan - dan membantu saya meningkatkan prestasi sebagai hasilnya.

soalan yang sering ditanya mengenai pengujian prestasi mengautomasikan dengan grunt.js

Apa itu grunt.js dan mengapa penting untuk ujian prestasi? Ia dibina di atas node.js dan menggunakan antara muka baris arahan untuk menjalankan tugas-tugas tersuai yang ditakrifkan dalam fail yang dikenali sebagai gruntfile. Grunt.js adalah penting untuk ujian prestasi kerana ia membolehkan pemaju mengautomasikan tugas yang memastikan kod berjalan dengan cekap dan tanpa kesilapan. Ini menjimatkan masa dan mengurangkan risiko kesilapan manusia, yang membawa kepada perisian yang lebih dipercayai dan berkualiti tinggi.

Bagaimana saya memasang grunt.js untuk ujian prestasi? Pertama perlu mempunyai Node.js dan NPM (Pengurus Pakej Node) yang dipasang pada sistem anda. Sebaik sahaja anda mempunyai ini, anda boleh memasang grunt.js dengan menjalankan perintah NPM Install -g grunt -cli di terminal anda. Ini memasang antara muka baris perintah grunt secara global pada sistem anda. Selepas itu, anda boleh menambah plugin Grunt dan Grunt ke projek anda dengan mendefinisikannya sebagai kebergantungan dalam fail pakej.json dan menjalankan pemasangan NPM.

Bagaimana saya membuat gruntfile untuk projek saya? > Gruntfile adalah fail JavaScript yang masuk dalam direktori akar projek anda dan mengandungi konfigurasi untuk tugas -tugas yang mengerang. Ia dinamakan gruntfile.js atau gruntfile.coffee dan ditulis dalam JavaScript atau CoffeeScript. Untuk membuat floilfile, anda menentukan fungsi pembalut yang akan meluluskan contoh runtime dan di dalam fungsi ini, anda boleh memuatkan plugin grunt, mengkonfigurasi tugas, dan mendaftarkan tugas tersuai.

Apakah beberapa tugas biasa yang boleh automatik dengan grunt.js?

grunt.js boleh mengautomasikan pelbagai tugas yang berkaitan dengan ujian prestasi dan pengoptimuman kod. Ini termasuk meminimumkan fail JavaScript dan CSS untuk mengurangkan saiznya, menyusun fail kurang dan sass ke dalam CSS, membongkar kod JavaScript untuk menangkap kesilapan dan menguatkuasakan piawaian pengekodan, menjalankan ujian unit untuk memastikan kod berfungsi seperti yang diharapkan, dan menyatukan fail untuk mengurangkan bilangan bilangan Permintaan http.

Bagaimana saya boleh menggunakan grunt.js untuk mengautomasikan ujian prestasi? Automatikkan ujian prestasi dengan grunt.js, anda boleh menggunakan plugin seperti grunt-contrib-uglify untuk minification, grunt-contrib-cssmin untuk minifikasi CSS, grunt-contrib-jshint untuk linting, dan grunt-contrib-qunit untuk ujian unit. Anda memasang plugin ini melalui npm, muatkannya di gruntfile anda dengan grunt.loadnpmtasks (), dan konfigurasikannya dengan menambahkan harta kepada kaedah grunt.initconfig (). Anda kemudian boleh menjalankan tugas dari baris arahan dengan grunt .

Bolehkah saya menjalankan pelbagai tugas sekaligus dengan grunt.js? Grunt.js dengan menentukan tugas yang memanggil tugas lain. Dalam gruntfile anda, anda boleh menggunakan grunt.registerTask () untuk menentukan tugas yang menjalankan pelbagai tugas mengikut urutan yang ditentukan. Sebagai contoh, grunt.registerTask ('lalai', ['jshint', 'qunit', 'uglify']); akan menjalankan tugas -tugas jshint, qunit, dan urlify dalam perintah itu. .InitConfig () kaedah dalam gruntfile anda. Setiap tugas mempunyai satu set pilihan yang mengawal kelakuannya dan ini boleh ditentukan dalam objek konfigurasi tugas. Sebagai contoh, tugas uglify mempunyai pilihan untuk Mangle, memampatkan, dan mencantikkan bahawa mengawal bagaimana kod JavaScript dikurangkan. > Fail Package.json dalam projek Grunt digunakan untuk menguruskan kebergantungan projek. Ia menyenaraikan plugin grunt dan pakej NPM lain yang perlu dijalankan oleh projek. Apabila anda menjalankan pemasangan NPM, NPM melihat fail pakej.json dan memasang pakej yang disenaraikan. Ini menjadikannya mudah untuk mengurus dan berkongsi kebergantungan projek anda. Terdapat plugin grunt untuk kerangka ujian popular seperti Mocha, Jasmine, dan Qunit, dan anda juga boleh menulis tugas -tugas tersuai untuk menjalankan ujian dengan kerangka lain. Ini menjadikan Grunt.js alat serba boleh untuk mengautomasikan ujian prestasi.

Apakah amalan terbaik untuk menggunakan grunt.js untuk ujian prestasi? -bendera kecil apabila menjalankan tugas untuk mendapatkan output terperinci, dan menggunakan bendera-untuk terus menjalankan tugas walaupun seseorang gagal. Ia juga merupakan idea yang baik untuk sentiasa mengemas kini plugin grunt anda untuk mendapatkan ciri -ciri terkini dan pembetulan pepijat.

Atas ialah kandungan terperinci Automatikkan Ujian Prestasi dengan Grunt.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!