Prestasi React: Tingkatkan dengan Tree Shaking

Gegar pokok ialah teknik penting dalam pembangunan JavaScript moden, terutamanya untuk perpustakaan seperti React. Ia membantu menghapuskan kod yang tidak digunakan daripada berkas terakhir, menghasilkan saiz fail yang lebih kecil dan prestasi aplikasi yang lebih pantas.

atau seperti kata MDN

Gegar pokok ialah istilah yang biasa digunakan dalam konteks JavaScript untuk menerangkan penyingkiran kod mati.

Apa itu Tree Shaking?

Gegaran pokok ialah istilah yang digunakan dalam berkas JavaScript (seperti Webpack dan Rollup) untuk menerangkan proses mengalih keluar kod yang tidak digunakan daripada berkas JavaScript terakhir anda. Ia berfungsi dengan menganalisis penyataan import/eksport dalam pangkalan kod anda, mengetahui bahagian mana kod anda sebenarnya sedang digunakan dan menghapuskan semua yang lain.

Nama "tree shaking" berasal daripada analogi menggoncang pokok dan membiarkan dahan (kod) yang tidak digunakan jatuh, hanya meninggalkan bahagian yang diperlukan dalam binaan akhir anda.

Mengapa Pembangun Bertindak Bertindak Mementingkan Gegaran Pokok?

Sebagai pembangun React, mengurangkan saiz himpunan JavaScript anda boleh memberi kesan yang ketara pada prestasi aplikasi anda. Himpunan besar membawa kepada masa muat yang perlahan dan pengalaman pengguna yang lemah, terutamanya pada rangkaian mudah alih. Gegaran pokok membantu memastikan bahawa hanya kod yang sebenarnya anda gunakan disertakan dalam binaan akhir anda, yang boleh meningkatkan prestasi secara mendadak.

Bagaimana Gegaran Pokok Berfungsi dalam Reaksi?

Gegaran pokok sangat bergantung pada Modul ES (ESM). Apabila anda mengimport dan mengeksport modul menggunakan sintaks ESM, pengikat seperti Webpack dan Rollup boleh menganalisis kod anda dan mengalih keluar eksport yang tidak digunakan.

Sebagai contoh, katakan anda menggunakan perpustakaan utiliti yang besar, tetapi anda hanya memerlukan satu fungsi:

// Bad practice: importing everything
import * as lodash from 'lodash';

Dalam kes ini, walaupun anda hanya menggunakan satu fungsi, keseluruhan perpustakaan lodash akan digabungkan. Ini tidak cekap dan meningkatkan saiz apl anda.

Sebaliknya, anda boleh menggunakan import bernama:

// Good practice: importing only what you need
import { debounce } from 'lodash';

Dengan cara ini, hanya fungsi nyahpantul disertakan dalam berkas anda dan kod lodash yang selebihnya dikecualikan, menjadikan apl anda lebih kecil.

Amalan Terbaik untuk Mendayakan Gegaran Pokok dalam Reaksi:

1. Gunakan Modul ES (ESM):

Gegaran pokok berfungsi paling baik apabila kod anda dan perpustakaan yang anda gunakan ditulis dalam ESM. Elakkan CommonJS jika boleh, kerana ia tidak menyokong gegaran pokok.

2. Import Sahaja Yang Anda Perlukan:

Seperti yang ditunjukkan di atas, sentiasa gunakan import bernama atau import fungsi khusus berbanding keseluruhan pustaka.

3. Hilangkan Kesan Sampingan:

Gegar pokok bergantung pada andaian bahawa mengimport modul tidak mempunyai kesan sampingan. "Kesan sampingan" boleh jadi apa sahaja yang mengubah keadaan global, mengubah suai pembolehubah atau melaksanakan kod di luar modul itu sendiri. Pastikan modul anda tidak mempunyai kesan sampingan yang tidak diingini yang boleh menghalang gegaran pokok daripada berfungsi.

4. Konfigurasikan Bundler Anda:

Pastikan pengikat anda (seperti Webpack atau Rollup) dikonfigurasikan dengan betul untuk gegaran pokok. Ini selalunya termasuk mendayakan mod pengeluaran untuk mendayakan pengoptimuman.

5. Leverage package.json "sideEffects" Medan:

Jika anda bekerja dengan perpustakaan, atau projek anda sendiri, pastikan anda menandai fail yang mempunyai kesan sampingan dalam package.json anda. Ini membantu pengikat memahami perkara yang boleh digoncang pokok dengan selamat.

Contoh:

// Bad practice: importing everything
import * as lodash from 'lodash';

Alat untuk Menganalisis dan Menguji Gegaran Pokok:

• Webpack Bundle Analyzer: Alat ini membantu anda menggambarkan kandungan bundle anda dan melihat sama ada sebarang kod yang tidak digunakan masih disertakan.
• Peta Sumber: Gunakan peta sumber untuk mengesan perkara yang disertakan dalam berkas terakhir.

Fikiran untuk diambil:

Gegar pokok ialah teknik pengoptimuman penting untuk pembangun React (dan bukan sahaja) yang ingin membina aplikasi yang cekap dan pantas. Dengan mengikuti amalan terbaik seperti menggunakan Modul ES, mengimport kod yang diperlukan sahaja dan memastikan modul bebas kesan sampingan, anda boleh memanfaatkan sepenuhnya gegaran pokok dan meningkatkan prestasi apl React anda dengan ketara.

Jika anda ingin meningkatkan prestasi apl anda, melaksanakan gegaran pokok ialah tempat yang bagus untuk bermula!

Atas ialah kandungan terperinci Prestasi React: Tingkatkan dengan Tree Shaking. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!