UniApp melaksanakan strategi pengoptimuman untuk pemuatan subkontrak dan pemuatan halaman malas

UniApp ialah rangka kerja pembangunan merentas platform berdasarkan Vue.js Ia boleh dijalankan pada berbilang platform pada masa yang sama, seperti program mini WeChat, H5, App, dll. Dalam pembangunan sebenar, apabila skala aplikasi meningkat, halaman dan sumber juga meningkat dengan sewajarnya Untuk meningkatkan prestasi aplikasi dan pengalaman pengguna, kami boleh menggunakan strategi pengoptimuman pemuatan subkontrak dan pemuatan halaman yang malas.

1. Pemuatan subpakej

Pemuatan subpakej dalam UniApp merujuk kepada mengasingkan beberapa halaman dan sumber aplikasi untuk mengurangkan saiz pakej apabila memuatkan buat kali pertama dan meningkatkan kelajuan pemuatan pertama. Dalam UniApp, pemuatan subpakej boleh dicapai dalam dua cara: pramuat turun subpakej dan pembungkusan kecil dinamik.

1. Pramuat turun subpakej

Pramuat turun subpakej bermaksud pramuat turun kandungan subpakej semasa permulaan aplikasi untuk meningkatkan kelajuan pemuatan apabila pengguna mengklik pada halaman subpakej. Dalam fail manifest.json uni-app, kami boleh mengkonfigurasi laluan subpakej yang perlu dimuat turun terlebih dahulu. Contoh kod adalah seperti berikut:

{
  "preloadRule": {
    "packages": [
      {
        "root": "pages/subPackage1",
        "name": "subPackage1"
      },
      {
        "root": "pages/subPackage2",
        "name": "subPackage2"
      }
    ]
  }
}

Dalam contoh di atas, kami mengkonfigurasi dua subpakej subPackage1 dan subPackage2, dan menetapkan laluan akar dan nama mereka. Apabila aplikasi dimulakan, UniApp akan pramuat turun kandungan kedua-dua subpakej ini secara automatik supaya halaman boleh dimuatkan dengan cepat apabila pengguna mengklik padanya.

2. Subkontrak dinamik

Subkontrak dinamik merujuk kepada memuatkan subkontrak yang diperlukan secara dinamik mengikut keperluan pengguna semasa proses permohonan berjalan. Melalui sub-pembungkusan dinamik, anda boleh mengelakkan memuatkan terlalu banyak halaman dan sumber sekaligus. Dalam UniApp, anda boleh menggunakan kaedah uni.requireSubpackage() untuk melaksanakan subpackaging dinamik. Kod sampel adalah seperti berikut:

uni.requireSubpackage({
  root: 'pages/subPackage1',
  success: function(res) {
    // 分包加载成功时的回调函数
    console.log('分包加载成功');
  },
  fail: function(res) {
    // 分包加载失败时的回调函数
    console.log('分包加载失败');
  }
});

Dalam contoh di atas, kami menggunakan kaedah uni.requireSubpackage() untuk memuatkan subpakej subPackage1. Apabila subpakej berjaya dimuatkan, fungsi panggil balik kejayaan akan dilaksanakan apabila pemuatan subpakej gagal, fungsi panggil balik gagal akan dilaksanakan.

2. Malas memuatkan halaman

Malas memuatkan halaman dalam UniApp bermakna hanya struktur asas dan sumber yang diperlukan halaman dimuatkan sebelum halaman dipaparkan buat kali pertama, dan sumber tidak penting lain dimuatkan selepas halaman dipaparkan. Melalui pemuatan malas halaman, permintaan sumber semasa pemuatan pertama dapat dikurangkan dan kelajuan pemuatan halaman dapat ditingkatkan.

Untuk melaksanakan pemuatan halaman yang malas, kita perlu menggunakan kaedah uni.lazyLoadComponent(). Kaedah ini boleh melambatkan pemuatan komponen sehingga ia benar-benar digunakan Kod sampel adalah seperti berikut:

<template>
  <view>
    <lazy-component v-if="showLazyComponent" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      showLazyComponent: false
    };
  },
  mounted() {
    setTimeout(() => {
      this.showLazyComponent = true;
    }, 2000);
  }
};
</script>

Dalam contoh di atas, komponen komponen malas akan dimuatkan dan dipaparkan hanya apabila showLazyComponent adalah benar. Dengan menetapkan fungsi lengah, anda boleh memuatkan komponen sebelum ia benar-benar digunakan.

3. Ringkasan

Melalui strategi pengoptimuman pemuatan subkontrak dan pemuatan halaman yang malas, prestasi dan pengalaman pengguna aplikasi UniApp boleh dipertingkatkan dengan berkesan. Dengan membahagikan subkontrak dan memuatkan komponen halaman secara rasional, permintaan sumber semasa pemuatan pertama boleh dikurangkan dan kelajuan pemuatan aplikasi boleh dipertingkatkan. Pembangun boleh memilih strategi pengoptimuman yang sesuai untuk pelaksanaan berdasarkan keadaan dan keperluan khusus aplikasi. Contoh kod di atas boleh digunakan sebagai rujukan untuk membantu pembangun melaksanakan pemuatan subpakej dan pemuatan halaman yang malas dengan lebih baik.

Atas ialah kandungan terperinci UniApp melaksanakan strategi pengoptimuman untuk pemuatan subkontrak dan pemuatan halaman malas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!