Gegaran pokok adalah teknik yang mengoptimumkan pembinaan JavaScript dengan mengeluarkan kod yang tidak digunakan. Ia bergantung kepada struktur statik modul ES, yang membolehkan alat seperti Webpack untuk menganalisis dan mengecualikan kandungan yang tidak dieksport yang tidak dirujuk, dengan itu mengurangkan jumlah pakej dan meningkatkan prestasi. Langkah -langkah kerja adalah seperti berikut: 1. Tulis kod modular menggunakan import/eksport ES6; 2. Webpack membina graf ketergantungan berdasarkan hubungan import; 3. Tanda eksport yang tidak digunakan sebagai "kod mati" semasa fasa pengoptimuman; 4. Keluarkan kod mati ini dari pakej akhir yang dihasilkan. Untuk memperbaiki kesan goncangan pokok, kita harus mendesak menggunakan modul ES, elakkan kesan sampingan yang tidak perlu, pilih perpustakaan yang menyokong pokok gemetar, dan membolehkan mod pengeluaran. Masalah biasa termasuk menggunakan sintaks CommonJS, import modul penuh, import dinamik, atau perpustakaan pihak ketiga yang tidak dioptimumkan, dan lain-lain, yang boleh menyebabkan goncangan pokok gagal. Ringkasnya, goncangan pokok adalah cara yang berkesan untuk menyelaraskan pakej JavaScript, tetapi kejayaannya bergantung kepada struktur kod dan pengurusan ketergantungan.

Tree Shaking adalah teknik yang digunakan dalam bundlers JavaScript moden seperti Webpack untuk menghapuskan kod yang tidak digunakan dari binaan akhir anda. Idea ini mudah: jika sekeping kod tidak digunakan, ia tidak sepatutnya dimasukkan ke dalam bundle yang dihantar kepada penyemak imbas.

Ini membantu mengurangkan saiz fail dan meningkatkan prestasi, terutamanya dalam aplikasi besar di mana anda mungkin mengimport keseluruhan perpustakaan tetapi hanya menggunakan sebahagian kecil daripada mereka.

Bagaimana Pokok Berkerut di Webpack

Webpack menggunakan analisis statik untuk mengesan bahagian -bahagian kod anda yang sebenarnya digunakan semasa runtime. Ia melakukan ini dengan menganalisis penyata import dan export (modul ES), yang bersifat statik. Jika fungsi atau pembolehubah dieksport tetapi tidak pernah diimport atau digunakan di mana -mana, Webpack boleh mengeluarkannya dengan selamat dari bundle output.

Inilah cara ia berfungsi dengan langkah demi langkah:

• Anda menulis kod modular menggunakan import / export ES6.
• Webpack membina graf ketergantungan berdasarkan import ini.
• Semasa fasa pengoptimuman, ia menandakan eksport yang tidak digunakan sebagai "kod mati."
• Kod mati itu kemudian dilucutkan dalam bundle akhir.

Adalah penting untuk diperhatikan bahawa pokok gemetar hanya berfungsi dengan pasti dengan modul ES. Menggunakan CommonJs ( require() ) tidak membenarkan tahap analisis statik yang sama, jadi Webpack tidak dapat menggoncang modul tersebut dengan berkesan.

Apa yang membantu pokok berjabat lebih baik

Untuk memanfaatkan pokok, ada beberapa perkara yang harus anda ingat:

• Gunakan modul ES secara konsisten
  Berpegang kepada import dan export di mana mungkin. Ini memberikan Webpack gambaran paling jelas tentang apa yang sedang digunakan.

• Elakkan kesan sampingan melainkan perlu
  Sesetengah modul mungkin mempunyai kesan sampingan - bermakna mereka melakukan sesuatu apabila diimport, walaupun tanpa sebarang panggilan fungsi tertentu. Webpack tidak akan mengeluarkan kod tersebut melainkan jika anda secara jelas menandakannya sebagai bebas kesan sampingan dalam package.json .

• Gunakan perpustakaan yang berstruktur dengan baik
  Perpustakaan yang dibina dengan pohon berjabat dalam fikiran (seperti versi ESM Lodash atau React) akan memecah fungsi mereka ke dalam modul yang lebih kecil, menjadikannya lebih mudah bagi bundlers untuk mengecualikan bahagian yang tidak digunakan.

• Dayakan mod pengeluaran
  Dalam webpack, berjalan dalam mode: 'production' secara automatik membolehkan pengoptimuman seperti minifikasi dan lebih agresif pokok berjabat.

Perangkap biasa dan mengapa pohon berjabat mungkin tidak berfungsi

Kadang -kadang anda mungkin mengharapkan kod dikeluarkan, tetapi ia masih berakhir dalam bundle. Berikut adalah beberapa sebab umum mengapa:

• Menggunakan sintaks CommonJS
  Seperti yang dinyatakan sebelum ini, require() menjadikannya sukar bagi Webpack untuk menentukan sama ada eksport modul digunakan.

• Mengimport keseluruhan modul yang tidak perlu
  Contohnya:

   import * sebagai digunakan dari './utils';

  Walaupun anda hanya menggunakan satu fungsi dari utils , mengimport segala -galanya mungkin menghalang pokok berjabat dari berfungsi dengan baik.

• Import atau syarat dinamik
  Sekiranya anda mengimport modul secara kondusif berdasarkan logik runtime, Webpack tidak dapat mengetahui lebih awal dari masa yang diperlukan, jadi ia termasuk semua kemungkinan.

• Perpustakaan pihak ketiga tidak dioptimumkan untuk gegaran pokok
  Sesetengah pakej membungkus semuanya bersama -sama, menjadikannya mustahil untuk mengekstrak hanya bahagian yang anda perlukan.

Pemikiran terakhir

Gegaran pokok adalah cara yang kuat untuk memastikan bundle JavaScript anda bersandar dengan mengeluarkan kod mati sebelum ia sampai kepada pengguna. Tetapi ia hanya berfungsi dengan baik apabila asas dan kebergantungan anda disusun dengan modul ES dan kesan sampingan yang minimum.

Jika anda menggunakan perkakas moden dan mengikuti amalan terbaik, Webpack sering boleh mengendalikan kebanyakan kerja di belakang tabir. Namun, memahami bagaimana ia beroperasi membantu anda menulis kod yang lebih cekap dan mengelakkan kejutan dalam saiz binaan akhir anda.

Pada dasarnya itu sahaja.

Atas ialah kandungan terperinci Apa itu pokok gemetar dalam webpack. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!