Teknik roven untuk Mengurangkan Saiz Bundle JavaScript dan Meningkatkan Prestasi-tutorial js-php.cn

roven Techniques to Reduce JavaScript Bundle Size and Boost Performance

Sebagai pengarang terlaris, saya menjemput anda untuk menerokai buku saya di Amazon. Jangan lupa ikuti saya di Medium dan tunjukkan sokongan anda. terima kasih! Sokongan anda bermakna dunia!

Sebagai pembangun, saya telah mengetahui bahawa mengoptimumkan saiz berkas JavaScript adalah penting untuk mencipta aplikasi web yang pantas dan cekap. Selama bertahun-tahun, saya telah menemui beberapa teknik yang secara konsisten membuahkan hasil yang cemerlang. Izinkan saya berkongsi pengalaman dan pandangan saya tentang enam kaedah berkuasa untuk mengurangkan saiz berkas JavaScript anda.

Pemecahan kod telah menjadi pengubah permainan dalam proses pembangunan saya. Dengan menggunakan import dinamik, saya telah dapat memuatkan modul JavaScript atas permintaan, dengan ketara mengurangkan masa pemuatan awal. Pendekatan ini sangat bermanfaat untuk aplikasi besar dengan set ciri yang kompleks. Berikut ialah contoh cara saya melaksanakan pemisahan kod:

const loadModule = async () => {
  const module = await import('./heavyModule.js');
  module.doSomething();
};

document.getElementById('loadButton').addEventListener('click', loadModule);

Salin selepas log masuk

Dalam contoh ini, modul berat hanya dimuatkan apabila pengguna mengklik butang, mengekalkan saiz berkas awal yang kecil.

Menggoncang pokok adalah satu lagi teknik yang sering saya gunakan. Dengan memanfaatkan modul ES6 dan membina alatan seperti Webpack atau Rollup, saya boleh menghapuskan kod mati daripada berkas saya. Proses ini mengalih keluar eksport yang tidak digunakan, dengan ketara mengurangkan saiz berkas akhir. Berikut ialah contoh mudah bagaimana saya menstruktur kod saya untuk mendayakan gegaran pokok yang berkesan:

// utils.js
export const usedFunction = () => {
  console.log('This function is used');
};

export const unusedFunction = () => {
  console.log('This function is not used');
};

// main.js
import { usedFunction } from './utils.js';

usedFunction();

Salin selepas log masuk

Dalam kes ini, apabila digabungkan dengan alat yang menyokong gegaran pokok, Fungsi yang tidak digunakan akan dikecualikan daripada berkas terakhir.

Minifikasi ialah amalan standard dalam kit alat pengoptimuman saya. Saya menggunakan alat seperti UglifyJS atau Terser untuk mengalih keluar ruang kosong, memendekkan nama pembolehubah dan mengoptimumkan kod. Proses ini boleh mengurangkan saiz fail dengan ketara tanpa mengubah fungsi. Berikut ialah contoh minifikasi sebelum dan selepas:

// Before minification
function calculateSum(a, b) {
  return a + b;
}

const result = calculateSum(5, 10);
console.log('The sum is: ' + result);

// After minification
function c(a,b){return a+b}const r=c(5,10);console.log('The sum is: '+r);

Salin selepas log masuk

Mampatan ialah satu lagi teknik penting yang selalu saya laksanakan. Dengan mendayakan pemampatan Gzip atau Brotli pada pelayan, saya boleh mengurangkan saiz pemindahan fail dengan ketara. Ini biasanya dikonfigurasikan pada peringkat pelayan. Contohnya, dalam fail Apache .htaccess:

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript
</IfModule>

Salin selepas log masuk

Pemuatan malas telah menjadi alat yang berkuasa dalam senjata pengoptimuman prestasi saya. Dengan menangguhkan pemuatan sumber tidak kritikal sehingga ia diperlukan, saya boleh meningkatkan masa pemuatan halaman awal secara mendadak. Berikut ialah contoh cara saya melaksanakan pemuatan malas untuk imej:

<img src="placeholder.jpg" data-src="large-image.jpg">



<p>This code uses the Intersection Observer API to load images only when they're about to enter the viewport.</p>

<p>Lastly, I always perform bundle analysis to visualize my bundle composition and identify optimization opportunities. Tools like webpack-bundle-analyzer have been invaluable in this process. Here's how I typically set it up in my Webpack configuration:<br>
</p>

<pre class="brush:php;toolbar:false">const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  // ... other webpack config
  plugins: [
    new BundleAnalyzerPlugin()
  ]
};

Salin selepas log masuk

Ini menjana peta pokok interaktif yang membantu saya mengenal pasti kebergantungan besar dan kawasan berpotensi untuk pengoptimuman.

Teknik ini secara konsisten membantu saya mengurangkan saiz berkas JavaScript, yang membawa kepada masa pemuatan yang lebih pantas dan prestasi yang lebih baik untuk aplikasi web. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa pengoptimuman ialah proses yang berterusan. Apabila teknologi web berkembang, teknik pengoptimuman baharu muncul dan adalah penting untuk sentiasa dikemas kini dan menyesuaikan strategi kami dengan sewajarnya.

Satu aspek yang saya dapati amat mencabar ialah mengimbangi pengoptimuman dengan kelajuan pembangunan. Pengoptimuman agresif kadangkala boleh menjadikan pangkalan kod lebih sukar untuk dikekalkan atau nyahpepijat. Sebagai contoh, walaupun minifikasi bagus untuk pengeluaran, ia boleh menyukarkan penyahpepijatan. Itulah sebabnya saya sentiasa memastikan saya mempunyai peta sumber yang tersedia untuk tujuan penyahpepijatan.

Satu lagi cabaran yang saya hadapi ialah berurusan dengan perpustakaan pihak ketiga. Walaupun kami boleh mengoptimumkan kod kami sendiri, kebergantungan pihak ketiga selalunya diprabundel dan boleh meningkatkan saiz berkas kami dengan ketara. Dalam kes sedemikian, saya mendapati ia berguna untuk mencari perpustakaan alternatif yang lebih ringan atau menggunakan teknik seperti import dinamik untuk memuatkan perpustakaan ini hanya apabila diperlukan.

Perlu juga dinyatakan bahawa aplikasi yang berbeza mungkin mendapat manfaat daripada strategi pengoptimuman yang berbeza. Sebagai contoh, aplikasi satu halaman (SPA) mungkin mendapat lebih banyak manfaat daripada pemisahan kod dan pemuatan malas, manakala tapak berbilang halaman yang lebih ringkas mungkin lebih memfokuskan pada pengurangan dan pemampatan.

Apabila melaksanakan pengoptimuman ini, adalah penting untuk mengukur kesannya. Saya sentiasa menjalankan audit prestasi sebelum dan selepas melaksanakan pengoptimuman untuk memastikan ia mempunyai kesan yang diingini. Alat seperti Lighthouse atau WebPageTest sangat berharga dalam hal ini.

Mari kita mendalami beberapa teknik ini dengan contoh yang lebih kompleks.

Untuk pemisahan kod dalam aplikasi React, saya mungkin menggunakan React.lazy dan Suspense:

const loadModule = async () => {
  const module = await import('./heavyModule.js');
  module.doSomething();
};

document.getElementById('loadButton').addEventListener('click', loadModule);

Salin selepas log masuk

Persediaan ini membolehkan setiap laluan dimuatkan secara berasingan, mengurangkan saiz berkas awal.

Untuk gegaran pokok, adalah penting untuk ambil perhatian bahawa ia berfungsi paling baik dengan sintaks modul ES6. Berikut ialah contoh cara saya boleh menstruktur modul utiliti untuk memanfaatkan sepenuhnya gegaran pokok:

// utils.js
export const usedFunction = () => {
  console.log('This function is used');
};

export const unusedFunction = () => {
  console.log('This function is not used');
};

// main.js
import { usedFunction } from './utils.js';

usedFunction();

Salin selepas log masuk

Dalam kes ini, fungsi tolak dan bahagi akan digoncang keluar daripada berkas terakhir jika ia tidak digunakan di tempat lain dalam aplikasi.

Mengenai peminimakan, alatan binaan moden selalunya menyertakan langkah ini secara lalai. Walau bagaimanapun, kadangkala kita boleh mencapai hasil yang lebih baik dengan mengubah tetapan. Contohnya, dengan Terser, kami mungkin menggunakan konfigurasi seperti ini:

// Before minification
function calculateSum(a, b) {
  return a + b;
}

const result = calculateSum(5, 10);
console.log('The sum is: ' + result);

// After minification
function c(a,b){return a+b}const r=c(5,10);console.log('The sum is: '+r);

Salin selepas log masuk

Konfigurasi ini bukan sahaja mengecilkan kod tetapi juga mengalih keluar pernyataan konsol, yang boleh membantu untuk binaan pengeluaran.

Untuk pemampatan, sementara konfigurasi sisi pelayan adalah penting, kami juga boleh menggunakan pemalam webpack untuk pra-mampatkan aset kami. CompressionWebpackPlugin bagus untuk ini:

const loadModule = async () => {
  const module = await import('./heavyModule.js');
  module.doSomething();
};

document.getElementById('loadButton').addEventListener('click', loadModule);

Salin selepas log masuk

Pemalam ini akan mencipta versi gzip aset anda bersama dengan versi asal, membolehkan penghantaran kandungan lebih pantas jika pelayan anda dikonfigurasikan untuk menggunakannya.

Pemuatan malas boleh melangkaui imej sahaja. Kami boleh menggunakannya pada mana-mana sumber yang tidak diperlukan segera. Sebagai contoh, kami mungkin malas memuatkan perpustakaan pihak ketiga yang berat:

// utils.js
export const usedFunction = () => {
  console.log('This function is used');
};

export const unusedFunction = () => {
  console.log('This function is not used');
};

// main.js
import { usedFunction } from './utils.js';

usedFunction();

Salin selepas log masuk

Dengan cara ini, pustaka carta hanya dimuatkan apabila pengguna mahu melihat carta, memastikan berkas awal kami ramping.

Mengenai analisis himpunan, cerapan yang diperoleh boleh membawa kepada beberapa pengoptimuman yang mengejutkan. Sebagai contoh, saya pernah mendapati bahawa pustaka pemformatan tarikh menambah berat yang ketara pada berkas saya. Dengan menggantikannya dengan beberapa fungsi tersuai yang meliputi kes penggunaan khusus kami, saya dapat mengurangkan jumlah yang besar daripada saiz berkas:

// Before minification
function calculateSum(a, b) {
  return a + b;
}

const result = calculateSum(5, 10);
console.log('The sum is: ' + result);

// After minification
function c(a,b){return a+b}const r=c(5,10);console.log('The sum is: '+r);

Salin selepas log masuk

Pengoptimuman sasaran jenis ini, yang dimaklumkan oleh analisis himpunan, boleh membawa kepada peningkatan prestasi yang ketara.

Kesimpulannya, mengoptimumkan saiz berkas JavaScript ialah proses pelbagai rupa yang memerlukan pemahaman yang baik tentang struktur dan keperluan aplikasi anda. Dengan melaksanakan teknik ini - pemisahan kod, goncangan pokok, pengurangan, pemampatan, pemuatan malas dan analisis berkas - kami boleh mengurangkan saiz berkas kami dengan ketara dan meningkatkan prestasi aplikasi. Ingat, matlamatnya bukan hanya untuk mempunyai himpunan yang lebih kecil, tetapi untuk menyediakan pengalaman yang lebih pantas dan cekap untuk pengguna kami. Semasa kami terus menolak sempadan perkara yang mungkin di web, teknik pengoptimuman ini akan menjadi lebih penting.

101 Buku

101 Buku ialah syarikat penerbitan dipacu AI yang diasaskan bersama oleh pengarang Aarav Joshi. Dengan memanfaatkan teknologi AI termaju, kami memastikan kos penerbitan kami sangat rendah—sesetengah buku berharga serendah $4—menjadikan pengetahuan berkualiti boleh diakses oleh semua orang.

Lihat buku kami Kod Bersih Golang tersedia di Amazon.

Nantikan kemas kini dan berita menarik. Apabila membeli-belah untuk buku, cari Aarav Joshi untuk mencari lebih banyak tajuk kami. Gunakan pautan yang disediakan untuk menikmati diskaun istimewa!

Ciptaan Kami

Pastikan anda melihat ciptaan kami:

Kami berada di Medium

Atas ialah kandungan terperinci Teknik roven untuk Mengurangkan Saiz Bundle JavaScript dan Meningkatkan Prestasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!