Rumah hujung hadapan web tutorial js Teknik roven untuk Mengurangkan Saiz Bundle JavaScript dan Meningkatkan Prestasi

Teknik roven untuk Mengurangkan Saiz Bundle JavaScript dan Meningkatkan Prestasi

Jan 07, 2025 pm 06:38 PM

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
Salin selepas log masuk
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
Salin selepas log masuk
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
Salin selepas log masuk
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
Salin selepas log masuk
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
Salin selepas log masuk
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
Salin selepas log masuk
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
Salin selepas log masuk
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
Salin selepas log masuk
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
Salin selepas log masuk
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:

Pusat Pelabur | Pelabur Central Spanish | Pelabur Jerman Tengah | Hidup Pintar | Epos & Gema | Misteri Membingungkan | Hindutva | Pembangunan Elit | Sekolah JS


Kami berada di Medium

Tech Koala Insights | Dunia Epok & Gema | Medium Pusat Pelabur | Medium Misteri Membingungkan | Sains & Zaman Sederhana | Hindutva Moden

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

<🎜>: Bubble Gum Simulator Infinity - Cara Mendapatkan dan Menggunakan Kekunci Diraja
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Sistem Fusion, dijelaskan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers of the Witch Tree - Cara Membuka Kunci Cangkuk Bergelut
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Tutorial Java
1672
14
Tutorial PHP
1276
29
Tutorial C#
1256
24
Python vs JavaScript: Keluk Pembelajaran dan Kemudahan Penggunaan Python vs JavaScript: Keluk Pembelajaran dan Kemudahan Penggunaan Apr 16, 2025 am 12:12 AM

Python lebih sesuai untuk pemula, dengan lengkung pembelajaran yang lancar dan sintaks ringkas; JavaScript sesuai untuk pembangunan front-end, dengan lengkung pembelajaran yang curam dan sintaks yang fleksibel. 1. Sintaks Python adalah intuitif dan sesuai untuk sains data dan pembangunan back-end. 2. JavaScript adalah fleksibel dan digunakan secara meluas dalam pengaturcaraan depan dan pelayan.

Dari C/C ke JavaScript: Bagaimana semuanya berfungsi Dari C/C ke JavaScript: Bagaimana semuanya berfungsi Apr 14, 2025 am 12:05 AM

Peralihan dari C/C ke JavaScript memerlukan menyesuaikan diri dengan menaip dinamik, pengumpulan sampah dan pengaturcaraan asynchronous. 1) C/C adalah bahasa yang ditaip secara statik yang memerlukan pengurusan memori manual, manakala JavaScript ditaip secara dinamik dan pengumpulan sampah diproses secara automatik. 2) C/C perlu dikumpulkan ke dalam kod mesin, manakala JavaScript adalah bahasa yang ditafsirkan. 3) JavaScript memperkenalkan konsep seperti penutupan, rantaian prototaip dan janji, yang meningkatkan keupayaan pengaturcaraan fleksibiliti dan asynchronous.

JavaScript dan Web: Fungsi teras dan kes penggunaan JavaScript dan Web: Fungsi teras dan kes penggunaan Apr 18, 2025 am 12:19 AM

Penggunaan utama JavaScript dalam pembangunan web termasuk interaksi klien, pengesahan bentuk dan komunikasi tak segerak. 1) kemas kini kandungan dinamik dan interaksi pengguna melalui operasi DOM; 2) pengesahan pelanggan dijalankan sebelum pengguna mengemukakan data untuk meningkatkan pengalaman pengguna; 3) Komunikasi yang tidak bersesuaian dengan pelayan dicapai melalui teknologi Ajax.

JavaScript in Action: Contoh dan projek dunia nyata JavaScript in Action: Contoh dan projek dunia nyata Apr 19, 2025 am 12:13 AM

Aplikasi JavaScript di dunia nyata termasuk pembangunan depan dan back-end. 1) Memaparkan aplikasi front-end dengan membina aplikasi senarai TODO, yang melibatkan operasi DOM dan pemprosesan acara. 2) Membina Restfulapi melalui Node.js dan menyatakan untuk menunjukkan aplikasi back-end.

Memahami Enjin JavaScript: Butiran Pelaksanaan Memahami Enjin JavaScript: Butiran Pelaksanaan Apr 17, 2025 am 12:05 AM

Memahami bagaimana enjin JavaScript berfungsi secara dalaman adalah penting kepada pemaju kerana ia membantu menulis kod yang lebih cekap dan memahami kesesakan prestasi dan strategi pengoptimuman. 1) aliran kerja enjin termasuk tiga peringkat: parsing, penyusun dan pelaksanaan; 2) Semasa proses pelaksanaan, enjin akan melakukan pengoptimuman dinamik, seperti cache dalam talian dan kelas tersembunyi; 3) Amalan terbaik termasuk mengelakkan pembolehubah global, mengoptimumkan gelung, menggunakan const dan membiarkan, dan mengelakkan penggunaan penutupan yang berlebihan.

Python vs JavaScript: Komuniti, Perpustakaan, dan Sumber Python vs JavaScript: Komuniti, Perpustakaan, dan Sumber Apr 15, 2025 am 12:16 AM

Python dan JavaScript mempunyai kelebihan dan kekurangan mereka sendiri dari segi komuniti, perpustakaan dan sumber. 1) Komuniti Python mesra dan sesuai untuk pemula, tetapi sumber pembangunan depan tidak kaya dengan JavaScript. 2) Python berkuasa dalam bidang sains data dan perpustakaan pembelajaran mesin, sementara JavaScript lebih baik dalam perpustakaan pembangunan dan kerangka pembangunan depan. 3) Kedua -duanya mempunyai sumber pembelajaran yang kaya, tetapi Python sesuai untuk memulakan dengan dokumen rasmi, sementara JavaScript lebih baik dengan MDNWebDocs. Pilihan harus berdasarkan keperluan projek dan kepentingan peribadi.

Python vs JavaScript: Persekitaran dan Alat Pembangunan Python vs JavaScript: Persekitaran dan Alat Pembangunan Apr 26, 2025 am 12:09 AM

Kedua -dua pilihan Python dan JavaScript dalam persekitaran pembangunan adalah penting. 1) Persekitaran pembangunan Python termasuk Pycharm, Jupyternotebook dan Anaconda, yang sesuai untuk sains data dan prototaip cepat. 2) Persekitaran pembangunan JavaScript termasuk node.js, vscode dan webpack, yang sesuai untuk pembangunan front-end dan back-end. Memilih alat yang betul mengikut keperluan projek dapat meningkatkan kecekapan pembangunan dan kadar kejayaan projek.

Peranan C/C dalam JavaScript Jurubah dan Penyusun Peranan C/C dalam JavaScript Jurubah dan Penyusun Apr 20, 2025 am 12:01 AM

C dan C memainkan peranan penting dalam enjin JavaScript, terutamanya digunakan untuk melaksanakan jurubahasa dan penyusun JIT. 1) C digunakan untuk menghuraikan kod sumber JavaScript dan menghasilkan pokok sintaks abstrak. 2) C bertanggungjawab untuk menjana dan melaksanakan bytecode. 3) C melaksanakan pengkompil JIT, mengoptimumkan dan menyusun kod hot-spot semasa runtime, dan dengan ketara meningkatkan kecekapan pelaksanaan JavaScript.

See all articles