Penjelasan terperinci tentang teknik pemisahan kod dan pemuatan malas dalam Vue

Dengan perkembangan pesat teknologi bahagian hadapan, aplikasi web moden telah menjadi semakin kompleks. Aplikasi ini perlu memproses lebih banyak data dan logik perniagaan yang lebih kompleks, yang menjadikan aplikasi JavaScript menjadi lebih besar dan lebih besar. Ini boleh mengakibatkan permulaan aplikasi yang lebih perlahan dan pengalaman pengguna yang lemah. Untuk tujuan ini, Vue menyediakan beberapa ciri lanjutan untuk membantu mengoptimumkan aplikasi anda. Yang paling penting ialah teknik pemisahan kod dan pemuatan malas.

Artikel ini akan menerangkan secara terperinci teknik pemisahan kod dan pemuatan malas dalam Vue. Kami akan meneroka apakah pemisahan kod, sebab anda perlu menggunakannya dalam aplikasi Vue, dan cara melaksanakannya. Sepanjang perjalanan, kami juga akan membincangkan teknik memuatkan malas, sebab ia penting dan cara menggunakannya dalam Vue.

Pembahagian Kod

Pecah kod ialah teknik yang membahagikan kod anda kepada kepingan kecil dan memuatkannya atas permintaan apabila diperlukan. Pemisahan kod boleh membantu mengurangkan masa muat awal dan meningkatkan kelajuan akses, terutamanya apabila aplikasi anda semakin besar.

Vue menyediakan dua kaedah pemisahan kod: melalui import dinamik (Import Dinamik) atau menggunakan pustaka pihak ketiga.

Penyelesaian Import Dinamik

Menggunakan import dinamik anda boleh membahagikan aplikasi anda kepada sebahagian kecil kod yang boleh dimuatkan atas permintaan apabila diperlukan. Import dinamik perlu digunakan dengan Webpack. Webpack boleh membungkus ketulan yang diperlukan ke dalam fail berasingan dan memuatkan ketulan ini hanya apabila pengguna memintanya.

Sekarang mari kita lihat contoh mudah. Katakan kita mempunyai komponen Apl yang mengandungi komponen Pengguna yang memaparkan maklumat pengguna. Kami boleh membahagikan komponen Pengguna kepada blok kod Apabila pengguna mengakses komponen Apl, komponen Pengguna hanya akan dimuatkan apabila ia diperlukan:

const App = {
  data() {
    return {
      user: null
    }
  },
  methods: {
    async loadUserData() {
      const userModule = await import('./user.js')
      this.user = userModule.default
    }
  },
  template: `
    <div>
      <button @click="loadUserData()">Load User Data</button>
      <div v-if="user">
        <h2>{{ user.name }}</h2>
        <p>{{ user.bio }}</p>
      </div>
    </div>
  `
}

Dalam contoh ini, kami menggunakan fungsi import untuk mengimport pengguna.js secara dinamik. modul. Apabila pengguna mengklik butang "Muat Data Pengguna", modul dimuatkan dan ditetapkan sebagai data pengguna untuk komponen Apl. Jika pengguna tidak mengklik butang, komponen Pengguna tidak akan dimuatkan.

Penyelesaian perpustakaan pihak ketiga

Selain import dinamik, anda juga boleh menggunakan perpustakaan pihak ketiga untuk mencapai pemisahan kod. Vue mengesyorkan menggunakan pemalam @babel/plugin-syntax-dynamic-import untuk menyokong import dinamik.

Selepas menggunakan pemalam ini, anda boleh menggunakan sintaks import dinamik dalam aplikasi anda. Contohnya:

const Foo = () => import('./Foo.vue')

Pernyataan ini akan mengembalikan Promise, yang akan mengeluarkan objek modular ES selepas dimuatkan.

Pemuatan malas

Pemuatan malas adalah serupa dengan import dinamik. Perbezaannya ialah pemuatan malas ialah kaedah pemuatan atas permintaan yang membahagikan kod anda kepada ketulan kecil dan memuatkannya hanya apabila diperlukan. Ini mengurangkan masa muat awal dan meningkatkan kelajuan akses.

Pemuatan malas dalam Vue boleh dilaksanakan menggunakan modul webpack dan ES. Berikut adalah dua cara untuk melakukannya.

Malas memuatkan melalui vue-router

Vue router boleh melaksanakan pemuatan malas dengan mentakrifkan komponen sebagai komponen tak segerak. Komponen tak segerak mengembalikan Janji, yang akan mengeluarkan komponen Vue apabila pemuatan selesai.

Berikut ialah contoh memuatkan komponen Pengguna menggunakan komponen tak segerak:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: () => import('./components/User.vue')
    }
  ]
})

Dalam contoh ini, kami menggunakan komponen tak segerak dalam konfigurasi penghala. Apabila pengguna mengakses laluan "/user/:id", komponen Pengguna akan dimuatkan secara tidak segerak.

Malas memuatkan melalui webpack

Mana-mana komponen dalam aplikasi Vue boleh ditakrifkan sebagai komponen tak segerak. Webpack membungkus komponen tak segerak ke dalam fail berasingan dan memuatkannya apabila pengguna memintanya.

Berikut ialah contoh memuatkan komponen Pengguna menggunakan pemuatan malas dalam Webpack:

const User = () => import(/* webpackChunkName: "user" */ './User.vue')

Dalam contoh ini, kami mencipta komponen Pengguna dan mentakrifkannya sebagai komponen tak segerak. Webpack membungkus komponen pengguna ke dalam fail berasingan bernama "user.chunk.js".

Akhir sekali, kami menggunakan Penghala Vue atau Webpack untuk melaksanakan pemisahan kod dan pemuatan malas, dengan itu mempercepatkan kelajuan pemuatan aplikasi dan mengoptimumkan pengalaman pengguna. Anda hanya perlu menggunakan petua di atas untuk membahagikan kod anda kepada kepingan kecil dan memuatkannya mengikut permintaan.

Atas ialah kandungan terperinci Penjelasan terperinci tentang teknik pemisahan kod dan pemuatan malas dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!