Cara menggunakan komponen tak segerak untuk melaksanakan pemuatan malas peringkat komponen dalam Vue

Vue ialah rangka kerja JavaScript popular yang menyediakan ciri yang dipanggil "komponen tak segerak" untuk melaksanakan pemuatan malas pada peringkat komponen. Teknik ini membolehkan kami memuatkan komponen dengan lebih cekap, dengan itu meningkatkan prestasi aplikasi. Di bawah ini kita akan mempelajari secara terperinci cara menggunakan komponen tak segerak dalam Vue untuk melaksanakan pemuatan malas peringkat komponen.

Apakah malas memuatkan?

Pemuatan malas (juga dipanggil pemuatan tertunda) bermakna apabila memuatkan halaman web, hanya sebahagian daripada kandungan dalam kawasan yang boleh dilihat dimuatkan dan bukannya memuatkan semua kandungan sekaligus. Teknologi ini boleh mengurangkan masa memuatkan dan penggunaan lebar jalur halaman web, sekali gus meningkatkan pengalaman pengguna.

Komponen tak segerak dalam Vue

Dalam Vue, menggunakan "komponen tak segerak" boleh melaksanakan pemuatan malas peringkat komponen dengan sangat mudah. Tidak seperti pemuatan segerak tradisional, komponen tak segerak boleh memuatkan komponen secara dinamik melalui import dan menjadikannya instan apabila diperlukan. Ini dilaksanakan oleh penyelesaian fungsi kilang dalam Vue. Berikut ialah contoh mudah:

Vue.component('my-component', function(resolve, reject) {
  setTimeout(function() {
    resolve({
      template: '<div>Hello World!</div>'
    });
  }, 1000); 
});

Dalam kod di atas, kami mentakrifkan komponen bernama "komponen saya" dan menggunakan fungsi kilang menyelesaikan di dalamnya. Fungsi ini akan dipanggil apabila komponen memerlukannya, memberikannya fungsi panggil balik tak segerak. Dalam contoh ini, kami menggunakan setTimeout untuk mensimulasikan panggilan balik tak segerak yang akan dilaksanakan selepas 1 saat dan membuat instantiate komponen, mengembalikan objek dengan templat HTML yang sepadan.

Melalui kod di atas, kita dapat melihat penggunaan asas komponen tak segerak dalam Vue. Apabila komponen perlu dimuatkan, Vue akan meminta dan memuatkan hanya bahagian komponen yang diperlukan daripada pelayan secara tidak segerak, dan bukannya memuatkan semuanya sekali gus apabila halaman dimuatkan. Kaedah ini boleh meningkatkan kelajuan memuatkan halaman dengan sangat baik, sekali gus meningkatkan pengalaman pengguna.

Bagaimana untuk melaksanakan pemuatan malas?

Untuk melaksanakan pemuatan malas dalam Vue, kita perlu menggunakan Webpack dan Vue-loader. Vue-loader ialah Pemuat sumber terbuka yang menukar komponen Vue kepada modul JavaScript. Manfaat menggunakan Vue-loader ialah ia boleh menukar komponen Vue secara automatik kepada Modul CommonJS atau ES6 dan menggunakan Webpack untuk pengoptimuman dan komposisi.

Berikut ialah contoh konfigurasi asas Vue-loader yang boleh anda tambahkan pada projek anda:

module.exports = {
  // ... 其他配置 ...
  module: {
    rules: [
      // ... 其他规则 ...
      {
        test: /.vue$/,
        loader: 'vue-loader',
        options: {
          // ... 其他参数 ...
          loaders: {
            // 对.vue文件中的<script>部分使用特定的loader
            js: 'babel-loader?presets[]=es2015',
            // 对.vue文件中的<template>部分使用特定的loader
            // 注意这里的lang属性必须设置为'html'
            template: 'vue-loader!' + 'html-loader'
          }
        }
      }
    ]
  }
};

Dalam contoh di atas, kami menggunakan vue-loader untuk mengkonfigurasi Vue file Loader. Selain mengendalikan bahagian JavaScript, kami juga menggunakan pemuat html untuk mengkonfigurasi Pemuat khusus untuk bahagian templat Vue. Kaedah ini memastikan komponen Vue kami boleh disusun dan dimuatkan dengan betul apabila dibungkus.

Seterusnya, untuk melaksanakan pemuatan malas, kita perlu menggunakan sintaks import dinamik. Berikut ialah contoh mudah:

const MyComponent = () => import('./MyComponent.vue');

Dalam kod di atas, kami menggunakan sintaks fungsi anak panah dalam ES6 dan merujuk komponen MyComponent.vue menggunakan sintaks import dinamik. Dengan cara ini komponen akan dimuatkan apabila ia diperlukan dan digunakan hanya apabila diperlukan. Malah, ia adalah malas memuatkan di peringkat komponen.

Apabila kami menggunakan kaedah ini untuk memuatkan komponen secara dinamik, Vue akan mengendalikan proses pemuatan dan instantiasi tak segerak secara automatik, membolehkan kami menggunakan komponen Vue dengan lebih cekap.

Ringkasan

Melalui artikel ini, kami mempelajari secara terperinci cara menggunakan komponen tak segerak dalam Vue untuk melaksanakan pemuatan malas peringkat komponen. Kami mempelajari cara menggunakan penyelesaian fungsi panggil balik tak segerak dan cara mengkonfigurasi projek Vue untuk melaksanakan pemuatan malas menggunakan Webpack dan Vue-loader. Selain itu, kami juga belajar untuk melaksanakan pemuatan & pemuatan peringkat komponen menggunakan sintaks import dinamik. Teknologi ini boleh meningkatkan prestasi aplikasi kami dan memberikan pengalaman yang lebih baik kepada pengguna.

Atas ialah kandungan terperinci Cara menggunakan komponen tak segerak untuk melaksanakan pemuatan malas peringkat komponen dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!