Menguatkuasakan belanjawan prestasi dengan webpack

Aplikasi web moden tidak lagi bergantung pada satu pakej JavaScript yang besar. Penyelidikan menunjukkan bahawa pakej yang lebih besar meningkatkan penggunaan memori dan beban CPU, terutamanya pada peranti mudah alih rendah dan pertengahan. Webpack menyediakan pelbagai ciri untuk mengurangkan saiz pakej dan mengendalikan keutamaan pemuatan sumber, yang paling penting ialah segmentasi kod dan petunjuk prestasi. Segmentasi kod membahagikan kod ke dalam pelbagai pakej, memuatkan permintaan atau selari; Petua prestasi mengesan sama ada saiz pakej melebihi ambang yang ditentukan semasa membina, untuk mengoptimumkan atau memadam kod yang tidak perlu.

Webpack Secara lalai, amaran dikeluarkan apabila saiz sumber atau titik masuk melebihi 250kb (244kib), tetapi anda boleh mengkonfigurasi bagaimana dan saiz ambang saiz arahan yang dipaparkan melalui objek performance dalam fail webpack.config.js . Artikel ini akan menerangkan cara menggunakan ciri ini sebagai barisan pertahanan pertama untuk mencegah kemerosotan prestasi.

Sesuaikan bajet anda

Sumber lalai dan ambang saiz titik masuk mungkin tidak selalu sesuai dengan keperluan anda, tetapi boleh dikonfigurasikan. Sebagai contoh, blog kecil mungkin mempunyai anggaran 50kb (48.8kib) setiap sumber dan titik masuk. Tetapan yang berkaitan dalam webpack.config.js adalah seperti berikut:

 modul.exports = {
  prestasi: {
    MaxAssetSize: 50000,
    MaxentryPointSize: 50000,
  }
};

Ciri -ciri maxAssetSize dan maxEntrypointSize mengawal saiz ambang (dalam bait) sumber dan titik masuk. maxEntrypointSize memastikan bahawa pakej yang dibuat dari fail yang disenaraikan dalam objek entry (biasanya fail JavaScript atau SASS) tidak melebihi ambang yang ditentukan; maxAssetSize menguatkuasakan sekatan yang sama pada sumber lain yang dihasilkan oleh Webpack (seperti imej, fon, dll.).

Ralat muncul apabila ambang melebihi

Webpack mengeluarkan amaran apabila ambang belanjawan dilampaui secara lalai. Ini cukup untuk persekitaran pembangunan, tetapi bukan untuk persekitaran pengeluaran. Anda boleh mencetuskan ralat dengan menambahkan harta hints ke objek performance dan menetapkannya kepada 'error' :

 modul.exports = {
  prestasi: {
    MaxAssetSize: 50000,
    MaxentryPointSize: 50000,
    Petua: 'Ralat',
  }
};

Nilai yang sah untuk atribut hints adalah 'warning' dan false . false akan mematikan sepenuhnya amaran, walaupun had yang ditentukan melebihi. Ia tidak disyorkan untuk menggunakan false dalam mod pengeluaran.

Tidak termasuk sumber tertentu

Webpack menguatkuasakan ambang saiz untuk setiap jenis sumber yang dihasilkannya. Jika sebarang sumber melebihi had yang ditentukan, ralat akan dibuang. Sebagai contoh, jika Webpack dikonfigurasi untuk memproses imej, ralat akan berlaku selagi salah satu imej melebihi ambang.

Harta assetFilter boleh digunakan untuk mengawal fail yang digunakan untuk mengira petunjuk prestasi:

 modul.exports = {
  prestasi: {
    MaxAssetSize: 50000,
    MaxentryPointSize: 50000,
    Petua: 'Ralat',
    AssetFilter: fungsi (assetFileName) {
      kembali! AssetFileName.endSwith ('. jpg');
    },
  }
};

Ini memberitahu Webpack untuk mengecualikan sebarang fail yang berakhir dalam .jpg apabila menjalankan pengiraan promosi prestasi. Ia boleh menggunakan logik yang lebih kompleks untuk memenuhi syarat pelbagai persekitaran, jenis fail, dan sumber lain.

had

Satu batasan semasa ialah ambang belanjawan yang sama berlaku untuk semua sumber dan titik masuk. Dalam erti kata lain, pelbagai belanjawan belum ditetapkan seperti yang diperlukan, seperti menetapkan sekatan yang berbeza untuk fail JavaScript, CSS, dan imej. Walau bagaimanapun, sudah ada permintaan tarik terbuka yang harus menghapuskan sekatan ini.

Meringkaskan

Ia berguna untuk menubuhkan dan menguatkuasakan belanjawan prestasi pada permulaan projek. Ia akan mengingatkan anda untuk memberi perhatian kepada saiz kebergantungan anda dan menggalakkan anda mencari alternatif yang lebih ringan untuk mengelakkan lebih daripada anggaran.

Tetapi anggaran prestasi tidak berhenti di sana! Saiz sumber adalah salah satu daripada banyak faktor yang mempengaruhi prestasi, jadi lebih banyak kerja masih diperlukan untuk memastikan pengalaman terbaik disediakan. Ujian Running Lighthouse adalah cara terbaik untuk memahami metrik dan cadangan lain untuk penambahbaikan.

Atas ialah kandungan terperinci Menguatkuasakan belanjawan prestasi dengan webpack. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!