Apakah gegaran pokok dalam JavaScript?

Apa itu Tree Shaking?

Jika anda seorang pembangun JavaScript yang berpengalaman, anda mungkin pernah mendengar tentang Tree Shaking. Mengalih keluar kod yang tidak digunakan daripada aplikasi adalah teknik biasa, dan ia juga mengalih keluar import yang tidak digunakan daripada aplikasi. Di sini, istilah "pokok goncang" diperkenalkan dengan menggoncang pokok, mengalih keluar cabang kod yang tidak diperlukan dan menyimpan kod yang diperlukan dalam pakej akhir.

Pada asasnya, dithering pokok digunakan untuk menghapuskan kod yang tidak sah atau tidak digunakan.

Kenapa kita perlukan Tree Shaking?

Seperti yang kita lihat dalam bahagian tutorial di atas, gegaran pokok digunakan untuk mengalih keluar kod yang tidak digunakan daripada pakej aplikasi. Sebab utama menggunakan Tree Shaking adalah untuk mengurangkan saiz berkas JavaScript yang kami hantar ke penyemak imbas pengguna. Jika saiz pakej lebih kecil, ia akan dimuatkan dengan lebih cepat pada penyemak imbas. Selain itu, kurang data diperlukan untuk memuat turun himpunan dalam penyemak imbas web, meningkatkan prestasi aplikasi.

Terutamanya, teknologi menggoncang pokok sangat penting dalam pembangunan web apabila membangunkan tapak web yang bergantung pada data dinamik yang besar. Jika aplikasi web anda sangat besar tetapi mengandungi halaman web statik, anda tidak perlu menggegar pokok, tetapi walaupun aplikasi anda kecil dan memuatkan banyak data dinamik, anda memerlukan goncangan pokok untuk mengalih keluar kod tambahan.

Bagaimana Tree Shaking berfungsi?

Dalam bahagian ini, kita akan mempelajari cara Tree Shaking berfungsi dalam pembangunan masa nyata.

Mari kita fahami gegaran pokok dengan contoh asas.

Di sini kami telah mencipta tiga fail berbeza dan menambahkan fungsi JavaScript berbeza pada fail berdasarkan nama fail.

Nama fail – sum.js

export function sum() {
   let array = [1, 2, 3, 4, 5];
   return array.reduce((a, b) => a + b, 0);
}

Nama fail – Factorial.js

export function factorial(n) {
   if (n === 0) {
      return 1;
   }
   return n * factorial(n - 1);
}

Nama fail-multiply.js

export function multiply(a, b) {
   return a * b;
}

Nama fail – index.js

import { sum } from './sum.js';
import { factorial } from './factorial.js';
import { multiply } from './multiply.js';
console.log(sum(2, 3));

Dalam contoh di atas, kami mengeksport jumlah, faktorial dan fungsi pendaraban daripada fail yang berbeza. Selepas itu, kami mengimport ketiga-tiga fungsi dalam fail index.js. Di sini, kami hanya menggunakan fungsi sum() tetapi bukan fungsi Factorial() atau multiply(). Oleh itu, kami mempunyai import yang tidak digunakan dalam fail index.js dan kami perlu mengalih keluarnya.

Dalam ES5, kami menggunakan "require()" untuk mengimport fungsi atau modul daripada mana-mana fail JavaScript lain. Oleh itu, kami boleh mengimport modul secara bersyarat seperti yang ditunjukkan di bawah.

let isSumRequire = true;
var sum;
var multiply;
if (isSumRequire) {
   sum = require('./sum');
} else {
   multiply = require('./multiply');
}

Di sini, berdasarkan syarat, kami mengimport modul supaya ia dimuatkan mengikut keperluan.

Tetapi dalam ES6, kami tidak boleh mengimport modul secara bersyarat seperti yang ditunjukkan di bawah.

let isSumRequire = true;
if (isSumRequire) {
   import sum from './sum';
} else {
   import multiply from './multiply';
}

Kod import bersyarat di atas tidak berfungsi. Oleh itu, kita perlu menggunakan pengikat JavaScript.

Bagaimana untuk menggunakan Bundler untuk Gegar Pokok?

Seperti yang kita lihat dalam bahagian di atas, dalam ES6 kita tidak boleh menggunakan import bersyarat. Oleh itu, kita perlu menggunakan pembungkus seperti webpack, Rollup, parcel, dll.

Pertama, kita perlu mengkonfigurasi pengikat untuk gegaran pokok. Ia melibatkan menetapkan mod kepada "Pengeluaran" dan menambah tetapan pengoptimuman untuk membolehkan gegaran pokok.

Sebagai contoh, dalam webpack, anda boleh menggunakan kod berikut.

module.exports = {
   mode: 'production',
   optimization: {
      usedExports: true,
   },
   // other configuration settings...
};

Selepas itu, pengguna perlu mengimport modul mengikut format ES6, dan perlu memastikan kaedah ‘require()’ tidak digunakan untuk mengimport.

Dengan cara ini, pembangun boleh mendayakan gegaran pokok dalam JavaScript menggunakan pengikat, yang membantu meningkatkan prestasi aplikasi dengan mengurangkan masa muat pada penyemak imbas web.

Atas ialah kandungan terperinci Apakah gegaran pokok dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!