PricingLoginStart free
Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) · Pelajaran

Analisis Saiz Himpunan

Analisis dan kurangkan saiz himpunan JavaScript aplikasi Anda untuk mempercepat pemuatan halaman awal dan meningkatkan prestasi.

Pelajaran 2 daripada 411 langkah

Analisis Saiz Himpunan ialah pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan), dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) merangkumi sejumlah 4 pelajaran.

Apakah Himpunan JavaScript?

Apabila anda membina aplikasi Next.js untuk pengeluaran, semua kod JavaScript anda – komponen, pustaka dan Next.js itu sendiri – digabungkan serta dioptimumkan menjadi satu atau beberapa fail yang dipanggil "himpunan".

Himpunan ini dimuat turun oleh pelayar pengguna untuk menjalankan aplikasi anda.

Kesan terhadap Prestasi

Semakin besar himpunan JavaScript anda, semakin lama masa yang diperlukan oleh pelayar pengguna untuk memuat turun, menghuraikan dan melaksanakannya.

  • Masa Pemuatan Lebih Perlahan: Pengguna perlu menunggu lebih lama sebelum aplikasi anda boleh berinteraksi.
  • Penggunaan Data Lebih Tinggi: Hal ini amat penting khususnya bagi pengguna mudah alih yang mempunyai pelan data terhad.
  • Pengalaman Pengguna Lebih Teruk: Boleh menyebabkan pengguna kecewa dan meninggalkan tapak anda.

Menganalisis Output Binaan

Next.js menyediakan maklumat berguna apabila anda menjalankan next build. Ia memaparkan saiz himpunan JavaScript bagi setiap halaman.

Namun begitu, untuk melihat dengan lebih terperinci kandungan himpunan tersebut, anda memerlukan alat khusus.

next build

Memvisualkan Himpunan dengan Analyzer

Pakej @next/bundle-analyzer ialah alat yang berkuasa. Pakej ini menghasilkan visualisasi peta pepohon interaktif bagi himpunan anda.

Peta visual ini membantu anda mengenal pasti dengan pantas modul besar atau pustaka pihak ketiga yang menyumbang dengan ketara kepada saiz himpunan anda.

Mengkonfigurasi Analyzer

Mula-mula, pasang pakej tersebut:

npm install --save-dev @next/bundle-analyzer

Kemudian, kemas kini next.config.js anda untuk mendayakannya secara bersyarat:

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
  openAnalyzer: false,
});

module.exports = withBundleAnalyzer({});

Menjana Laporan Himpunan

Untuk menjana laporan, anda perlu menetapkan pemboleh ubah persekitaran ANALYZE dan kemudian menjalankan perintah binaan Next.js anda.

Tindakan ini akan menghasilkan fail HTML dalam folder .next/analyze yang boleh anda buka dalam pelayar.

ANALYZE=true npm run build

Apakah yang Menjadikan Himpunan Besar?

Beberapa faktor boleh menyebabkan himpunan menjadi terlalu besar:

  • Pustaka Besar: Mengimport keseluruhan pustaka sedangkan anda hanya menggunakan sebahagian kecil daripadanya.
  • Kod Pendua: Bahagian aplikasi yang berbeza mengimport modul yang sama.
  • Kod Tidak Digunakan: Kod yang disertakan tetapi tidak pernah dilaksanakan (kod mati).
  • Aset Berat: SVG sebaris atau imej base64 secara terus dalam fail JS.

Memisahkan Kod untuk Kecekapan

Pemisahan kod ialah teknik yang memecahkan kod anda kepada "bahagian" yang lebih kecil dan boleh dimuatkan apabila diperlukan. Next.js melakukan perkara ini secara automatik untuk halaman.

Untuk komponen dalam halaman, anda boleh menggunakan import dinamik supaya komponen tersebut hanya dimuatkan apabila diperlukan, sekali gus mengurangkan saiz himpunan awal.

Memuatkan Komponen Secara Malas

Gunakan next/dynamic untuk mengimport komponen hanya apabila komponen tersebut dipaparkan. Ini amat sesuai untuk komponen yang tidak penting semasa pemuatan halaman awal, seperti tetingkap modal atau panel pentadbir.

import dynamic from 'next/dynamic';

const LazyComponent = dynamic(() => import('../components/HeavyComponent'), {
  loading: () => <p>Loading...</p>,
});

function MyPage() {
  return (
    <div>
      <h1>My Page</h1>
      <LazyComponent />
    </div>
  );
}

Semakan Pantas: Pengoptimuman Himpunan

Pertimbangkan aplikasi Next.js yang telah berkembang dengan ketara. Antara strategi berikut, yang manakah berkesan untuk mengurangkan saiz himpunan JavaScript awal?

Jawab dalam pelajaran interaktif

Ringkasan Pengoptimuman Himpunan

Syabas! Anda telah belajar cara menganalisis saiz himpunan JavaScript aplikasi Next.js dan melaksanakan teknik pengoptimuman utama.

  • Gunakan @next/bundle-analyzer untuk memvisualkan himpunan anda.
  • Laksanakan import dinamik untuk komponen yang tidak penting.
  • Berikan perhatian kepada pustaka pihak ketiga yang besar dan pastikan pengguguran pepohon berkesan.

Mengoptimumkan saiz himpunan amat penting untuk memberikan pengalaman pengguna yang pantas dan responsif.

Percuma untuk bermula

Pelajari TypeScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus
22
Pelajaran
88
Mula belajar secara percumaLihat kursus penuh

Soalan Lazim

Adakah pelajaran “Analisis Saiz Himpunan” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan), termasuk “Analisis Saiz Himpunan”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Analisis Saiz Himpunan”?

Analisis dan kurangkan saiz himpunan JavaScript aplikasi Anda untuk mempercepat pemuatan halaman awal dan meningkatkan prestasi. Anda berlatih Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan)?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Analisis Saiz Himpunan” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) ini?

Ya. Setiap pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

  1. Pengoptimuman Imej & Fon
  2. Analisis Saiz Himpunan
  3. Strategi Caching Lanjutan
  4. UI Penstriman dengan Suspense dan Keadaan Pemuatan
← Kembali ke Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan)