Bagaimana untuk melaksanakan pemuatan atas permintaan dan gegaran pokok dalam Vue

Dalam pembangunan bahagian hadapan, memandangkan tapak web dan aplikasi terus berkembang, kami perlu mempertimbangkan untuk mengoptimumkan kod kami untuk menjadikannya lebih ringan dan lebih pantas untuk dimuatkan dalam proses ini, pemuatan atas permintaan dan gegaran Pokok boleh Digunakan untuk memastikan kami aplikasi dioptimumkan sebaik mungkin.

Vue, sebagai rangka kerja JavaScript yang popular, telah memberikan kami banyak alatan dan kemahiran untuk membantu kami memuatkan dan menggunakan Tree shaking dengan lebih mudah atas permintaan, untuk meningkatkan prestasi aplikasi kami. Artikel ini akan menyelidiki cara melaksanakan teknik ini dalam Vue.

Pemuatan malas

Pemuatan malas bermakna apabila pengguna perlu mengakses halaman atau komponen tertentu, fail JavaScript dan CSS yang diperlukan dimuatkan, yang menjadikan halaman dimuatkan dengan lebih cepat, kerana hanya perlu kod akan dimuatkan. Vue mempunyai beberapa cara untuk melaksanakan pemuatan atas permintaan.

1. Gunakan komponen tak segerak Vue

Vue menyediakan jenis komponen khas - komponen Async. Dengan menggunakan komponen tak segerak, kami boleh menangguhkan pemuatan komponen yang diperlukan.

<template>
  <div>
    <button @click="loadComponent">Load Component</button>
    <div v-if="showComponent">
      <AsyncComponent />
    </div>
  </div>
</template>

<script>
  import AsyncComponent from './AsyncComponent.vue'
  export default {
    components: {
      AsyncComponent
    },
    data () {
      return {
        showComponent: false
      }
    },
    methods: {
      loadComponent () {
        this.showComponent = true
      }
    }
  }
</script>

Dalam contoh ini, kami mencipta butang untuk mencetuskan kaedah loadComponent, yang menetapkan bendera komponen paparan. AsyncComponent akan dimuatkan dan diberikan hanya jika bendera itu benar.

2. Pemisahan Kod menggunakan pek web

Selain komponen asynchronous Vue, pek web juga menyediakan fungsi Pemisahan Kod. Pemisahan Kod ialah teknologi bahagian hadapan yang membahagikan aplikasi kepada modul yang lebih kecil supaya ia bebas antara satu sama lain. Dengan menggunakan Pemisahan Kod, kami boleh memuatkan fail JavaScript dan CSS atas permintaan.

Untuk melaksanakan Pemisahan Kod, kita perlu menggunakan kaedah berikut yang disediakan oleh webpack:

import(/* webpackChunkName: "my-chunk-name" */ './my-component.js')

webpackChunkName memberitahu webpack cara menamakan bahagian kod. Fail ini akan dibungkus ke dalam blok kod yang berasingan dan dimuatkan secara dinamik.

Gegar Pokok

Gegar pokok ialah teknik yang mengalih keluar kod yang tidak digunakan daripada aplikasi. Ia berguna dalam JavaScript, terutamanya apabila kami menggunakan banyak perpustakaan pihak ketiga. Gegaran pokok akan membantu kami menentukan kod perpustakaan yang tidak digunakan, dengan itu mengoptimumkan aplikasi kami.

Dalam Vue, kami boleh menggunakan langkah berikut untuk mengoptimumkan aplikasi dan melaksanakan gegaran Pokok.

1 Pastikan anda menggunakan modul ES6

Aplikasi Vue mesti menggunakan modul ES6. Ini bermakna kita harus menggunakan penyata import/eksport untuk mengimport dan mengeksport modul. Modul ES6 membenarkan webpack menggunakan teknologi Tree Shaking.

2. Pasang pemalam babel-plugin-transform-imports

Kami perlu memasang babel-plugin-transform-imports, iaitu pemalam pengoptimuman yang diimport daripada modul. Pemalam ini akan mengoptimumkan kod modul yang diimport apabila membungkus dengan webpack.

Kita perlu menambah konfigurasi berikut dalam .babelrc:

{
  "plugins": [
    ["transform-imports", {
      "lodash": {
        "transform": "lodash/${member}",
        "preventFullImport": true
      }
    }]
  ]
}

3 Dayakan Tree Shaking dalam webpack

Untuk mendayakan Tree shaking, kita perlu menggunakan blok kod berikut. dalam Dalam webpack.config.js:

module.exports = {
  //...
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all'
    }
  }
};

runtimeChunk ditetapkan kepada 'single' untuk mengelakkan penggunaan semula dalam kod.

ketulan: 'semua' memastikan pek web berkongsi jumlah minimum kod antara semua modul, sekali gus mencapai gegaran Pokok.

Kesimpulan

Pemuatan atas permintaan dan Teknik goncangan pokok adalah penting untuk meningkatkan prestasi aplikasi. Dalam Vue, ia boleh dilaksanakan melalui komponen async Vue dan Pemisahan Kod pek web, serta menggunakan pemalam babel-plugin-transform-imports dan ciri gegar Pokok pek web untuk memuatkan dan mengalih keluar kod yang tidak digunakan secara dinamik.

Kami harus sentiasa memberi perhatian kepada prestasi aplikasi kami dan menggunakan sebarang alat dan teknik yang boleh meningkatkan prestasinya.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan pemuatan atas permintaan dan gegaran pokok dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!