Mengoptimumkan prestasi aplikasi VUE dengan komponen Async

Takeaways Key

Komponen Asynchronous dan fungsi pemisahan kod Webpack boleh digunakan dalam aplikasi VUE untuk memuatkan bahagian halaman selepas render awal aplikasi, mengurangkan masa beban awal dan meningkatkan prestasi aplikasi.
• Vue memenuhi import dinamik, bentuk import seperti fungsi yang mengembalikan janji yang mengandungi komponen yang diminta (VUE), yang membolehkan modul dimuatkan menggunakan ungkapan.
komponen asynchronous boleh dimuatkan secara kondusif, hanya memuatkannya apabila mereka benar -benar diperlukan, yang boleh dicapai dengan menetapkan parameter menjadi benar apabila pengguna melakukan tindakan tertentu.
• Adalah mungkin untuk menentukan komponen pemuatan dan/atau ralat apabila komponen async mengambil sedikit masa untuk memuatkan atau gagal memuat, yang boleh berguna untuk menunjukkan mesej animasi atau ralat.
Ingin belajar vue.js dari bawah ke atas? Dapatkan keseluruhan koleksi buku Vue yang meliputi asas, projek, tip dan alat & banyak lagi dengan SitePoint Premium. Sertai sekarang hanya $ 14,99/bulan.

Aplikasi satu halaman kadang-kadang polis sedikit flack untuk beban awal yang perlahan. Ini kerana secara tradisinya, pelayan akan menghantar sekumpulan besar JavaScript kepada pelanggan, yang mesti dimuat turun dan dihuraikan sebelum apa -apa yang dipaparkan pada skrin. Seperti yang anda bayangkan, apabila aplikasi anda tumbuh dalam saiz, ini boleh menjadi lebih bermasalah.

bernasib baik, apabila membina aplikasi Vue menggunakan Vue CLI (yang menggunakan Webpack di bawah tudung), terdapat beberapa langkah yang boleh diambil untuk mengatasi ini. Dalam artikel ini, saya akan menunjukkan bagaimana penggunaan kedua-dua komponen asynchronous dan fungsi pemisahan kod Webpack untuk dimuatkan di bahagian halaman selepas render awal aplikasi. Ini akan memastikan masa beban awal minimum dan memberikan aplikasi anda rasa yang sombong.

Untuk mengikuti tutorial ini, anda memerlukan pemahaman asas tentang vue.js dan pilihan node.js.

komponen async

Sebelum kita menyelam untuk mencipta komponen tak segerak, mari kita lihat bagaimana kita biasanya memuat komponen. Untuk berbuat demikian, kami akan menggunakan komponen mesej yang sangat mudah:

Sekarang bahawa kami telah mencipta komponen kami, mari muatkannya ke dalam fail app.vue kami dan paparkannya. Kami hanya boleh mengimport komponen dan menambahkannya ke pilihan komponen supaya kami dapat menggunakannya dalam templat kami:

tetapi apa yang berlaku sekarang? Komponen mesej akan dimuatkan apabila aplikasi dimuatkan, jadi ia dimasukkan ke dalam beban awal.

<span><!-- Message.vue -->
</span><span><span><span><template</span>></span>
</span>  <span><span><span><h1</span>></span>New message!<span><span></h1</span>></span>
</span><span><span><span></template</span>></span>
</span>

Ini mungkin tidak terdengar seperti masalah besar untuk aplikasi mudah, tetapi pertimbangkan sesuatu yang lebih kompleks seperti kedai web. Bayangkan pengguna menambah item ke bakul, kemudian ingin menyemak, jadi klik butang checkout yang menjadikan kotak dengan semua butiran item yang dipilih. Menggunakan kaedah di atas, kotak checkout ini akan dimasukkan ke dalam bundle awal, walaupun kami hanya memerlukan komponen apabila pengguna mengklik butang checkout. Malah mungkin pengguna menavigasi melalui laman web tanpa mengklik butang checkout, yang bermaksud bahawa ia tidak masuk akal untuk membazirkan sumber untuk memuatkan komponen yang berpotensi tidak digunakan.

Untuk meningkatkan kecekapan aplikasi, kita boleh menggabungkan kedua -dua teknik pemisahan malas dan kod pemisahan.

pemuatan malas adalah tentang melambatkan beban awal komponen. Anda dapat melihat pemuatan malas dalam tindakan di tapak seperti Medium.com, di mana imej dimuatkan sebelum mereka diperlukan. Ini berguna, kerana kita tidak perlu membazirkan sumber memuat semua imej untuk jawatan tertentu di depan, kerana pembaca mungkin melangkau artikel separuh ke bawah.

Kod pemisahan Ciri Webpack menyediakan membolehkan anda memecah kod anda ke dalam pelbagai berkas yang kemudiannya boleh dimuatkan atas permintaan atau selari pada masa yang akan datang. Ia boleh digunakan untuk memuatkan kepingan kod tertentu hanya apabila ia diperlukan atau digunakan.

import dinamik

bernasib baik, Vue memenuhi senario ini menggunakan sesuatu yang disebut import dinamik. Ciri ini memperkenalkan bentuk import seperti fungsi baru yang akan mengembalikan janji yang mengandungi komponen yang diminta (VUE). Oleh kerana import adalah fungsi yang menerima rentetan, kita boleh melakukan perkara yang kuat seperti memuatkan modul menggunakan ungkapan. Import dinamik telah tersedia di Chrome sejak versi 61. Maklumat lanjut mengenai mereka boleh didapati di laman web pemaju Google.

Pemisahan kod dijaga oleh bundlers seperti Webpack, Rollup atau Parcel, yang memahami sintaks import dinamik dan membuat fail berasingan untuk setiap modul yang diimport secara dinamik. Kami akan melihat ini kemudian dalam tab Rangkaian Konsol kami. Tetapi pertama, mari kita lihat perbezaan antara import statik dan dinamik:

<span><!-- Message.vue -->
</span><span><span><span><template</span>></span>
</span>  <span><span><span><h1</span>></span>New message!<span><span></h1</span>></span>
</span><span><span><span></template</span>></span>
</span>

Sekarang, mari kita gunakan pengetahuan ini ke komponen mesej kami, dan kami akan mendapat komponen app.vue yang kelihatan seperti ini:

<span><!-- App.vue -->
</span><span><span><span><template</span>></span>
</span>  <span><span><span><div</span>></span>
</span>    <span><span><span><message</span>></span><span><span></message</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></template</span>></span>
</span>
<span><span><span><script</span>></span><span>
</span></span><span><span><span>import <span>Message</span> from "./Message";
</span></span></span><span><span><span>export default {
</span></span></span><span><span>  <span>components: {
</span></span></span><span><span>    <span>Message
</span></span></span><span><span>  <span>}
</span></span></span><span><span><span>};
</span></span></span><span><span></span><span><span></script</span>></span>
</span>

Seperti yang anda lihat, fungsi import () akan menyelesaikan janji yang mengembalikan komponen, yang bermaksud bahawa kami telah berjaya memuatkan komponen kami secara asynchronously. Jika anda melihat di tab Rangkaian Devtools anda, anda akan melihat fail yang dipanggil 0.Js yang mengandungi komponen asynchronous anda.

Komponen Async Memuatkan Secara kondisinya

Sekarang kita mempunyai pegangan pada komponen asynchronous, mari kita benar -benar menuai kuasa mereka dengan hanya memuatkan mereka apabila mereka benar -benar diperlukan. Dalam bahagian sebelumnya artikel ini, saya menjelaskan kes penggunaan kotak checkout yang hanya dimuat apabila pengguna memukul butang checkout. Mari kita bina itu.

Persediaan Projek

Jika anda tidak memasang Vue CLI, anda harus ambil sekarang:

<span><!-- Message.vue -->
</span><span><span><span><template</span>></span>
</span>  <span><span><span><h1</span>></span>New message!<span><span></h1</span>></span>
</span><span><span><span></template</span>></span>
</span>

Seterusnya, gunakan CLI untuk membuat projek baru, memilih pratetap lalai apabila diminta:

<span><!-- App.vue -->
</span><span><span><span><template</span>></span>
</span>  <span><span><span><div</span>></span>
</span>    <span><span><span><message</span>></span><span><span></message</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></template</span>></span>
</span>
<span><span><span><script</span>></span><span>
</span></span><span><span><span>import <span>Message</span> from "./Message";
</span></span></span><span><span><span>export default {
</span></span></span><span><span>  <span>components: {
</span></span></span><span><span>    <span>Message
</span></span></span><span><span>  <span>}
</span></span></span><span><span><span>};
</span></span></span><span><span></span><span><span></script</span>></span>
</span>

Tukar ke dalam direktori projek, kemudian pasang perpustakaan ant-reka bentuk, yang akan kami gunakan untuk gaya:

<span>// static import
</span><span>import <span>Message</span> from "./Message";
</span>
<span>// dynamic import
</span><span>import("./Message").then(<span>Message</span> => {
</span>  <span>// Message module is available here...
</span><span>});
</span>

Seterusnya, import perpustakaan reka bentuk semut di src/main.js:

<span><!-- App.vue -->
</span><span><span><span><template</span>></span>
</span>  <span><span><span><div</span>></span>
</span>    <span><span><span><message</span>></span><span><span></message</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></template</span>></span>
</span>
<span><span><span><script</span>></span><span>
</span></span><span><span><span>import <span>Message</span> from "./Message";
</span></span></span><span><span><span>export default {
</span></span></span><span><span>  <span>components: {
</span></span></span><span><span>    <span><span>Message</span>: () => import("./Message")
</span></span></span><span><span>  <span>}
</span></span></span><span><span><span>};
</span></span></span><span><span></span><span><span></script</span>></span>
</span>

Akhirnya, buat dua komponen baru dalam src/comonents, checkout.vue dan items.vue:

<span>npm i -g @vue/cli
</span>

Membuat pandangan kedai

Buka src/app.vue dan ganti kod di sana dengan yang berikut:

vue create my-store

Tidak ada yang mewah di sini. Apa yang kami lakukan ialah memaparkan mesej dan membuat komponen .

Seterusnya, buka src/komponen/items.vue dan tambahkan kod berikut:

<span>cd my-store
</span><span>npm i ant-design-vue
</span>

Dalam fail ini, kami memaparkan ikon keranjang belanja dengan jumlah item yang dibeli semasa. Item itu sendiri ditarik dari pelbagai item, diisytiharkan sebagai harta data. Jika anda mengklik butang Buy item, kaedah addItem dipanggil, yang akan menolak item yang dipersoalkan ke array senarai belanja. Sebaliknya, ini akan meningkatkan jumlah kereta.

kami juga menambah butang checkout ke halaman, dan ini adalah perkara yang mula menarik:

<span>import 'ant-design-vue/dist/antd.css'
</span>

Apabila pengguna mengklik pada butang ini, kami menetapkan Parameter Show menjadi kenyataan. Nilai sebenar ini sangat penting untuk tujuan memuatkan komponen async kami.

Beberapa baris di bawah, anda boleh mencari pernyataan V-IF, yang hanya memaparkan kandungan

apabila pertunjukan ditetapkan kepada benar. Tag

ini mengandungi komponen checkout, yang hanya ingin dimuatkan apabila pengguna telah memukul butang checkout.

Komponen checkout dimuatkan secara asynchronously dalam pilihan komponen di bahagian . Perkara yang keren di sini ialah kita juga boleh lulus argumen kepada komponen melalui pernyataan V-BIND. Seperti yang anda lihat, ia agak mudah untuk membuat komponen asynchronous bersyarat:

<span>touch src/components/{Checkout.vue,Items.vue}
</span>

Mari cepat tambahkan kod untuk komponen checkout dalam src/komponen/checkout.vue:

<span><span><span><template</span>></span>
</span>  <span><span><span><div</span> id<span>="app"</span>></span>
</span>    <span><span><span><h1</span>></span>{{ msg }}<span><span></h1</span>></span>
</span>    <span><span><span><items</span>></span><span><span></items</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></template</span>></span>
</span>
<span><span><span><script</span>></span><span>
</span></span><span><span><span>import items from "./components/Items"
</span></span></span><span><span>
</span></span><span><span><span>export default {
</span></span></span><span><span>  <span>components: {
</span></span></span><span><span>    items
</span></span><span><span>  <span>},
</span></span></span><span><span>  <span>name: 'app',
</span></span></span><span><span>  <span>data () {
</span></span></span><span><span>    <span>return {
</span></span></span><span><span>      <span>msg: 'My Fancy T-Shirt Store'
</span></span></span><span><span>    <span>}
</span></span></span><span><span>  <span>}
</span></span></span><span><span><span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span><span><span>#app</span> {
</span></span></span><span><span>  <span>font-family: 'Avenir', Helvetica, Arial, sans-serif;
</span></span></span><span><span>  <span>-webkit-font-smoothing: antialiased;
</span></span></span><span><span>  <span>-moz-osx-font-smoothing: grayscale;
</span></span></span><span><span>  <span>text-align: center;
</span></span></span><span><span>  <span>color: #2c3e50;
</span></span></span><span><span>  <span>margin-top: 60px;
</span></span></span><span><span><span>}
</span></span></span><span><span>
</span></span><span><span><span>h1<span>, h2</span> {
</span></span></span><span><span>  <span>font-weight: normal;
</span></span></span><span><span><span>}
</span></span></span><span><span>
</span></span><span><span><span>ul {
</span></span></span><span><span>  <span>list-style-type: none;
</span></span></span><span><span>  <span>padding: 0;
</span></span></span><span><span><span>}
</span></span></span><span><span>
</span></span><span><span><span>li {
</span></span></span><span><span>  <span>display: inline-block;
</span></span></span><span><span>  <span>margin: 0 10px;
</span></span></span><span><span><span>}
</span></span></span><span><span>
</span></span><span><span><span>a {
</span></span></span><span><span>  <span>color: #42b983;
</span></span></span><span><span><span>}
</span></span></span><span><span></span><span><span></style</span>></span>
</span>

di sini kami melingkari alat peraga yang kami terima sebagai senarai belanja dan mengeluarkannya ke skrin.

Anda boleh menjalankan aplikasi menggunakan perintah NPM Run Serve. Kemudian navigasi ke http: // localhost: 8080/. Sekiranya semua telah mengikut pelan, anda harus melihat sesuatu seperti apa yang ditunjukkan dalam imej di bawah.

Cuba klik di sekitar kedai dengan tab Rangkaian anda terbuka untuk memastikan diri anda bahawa komponen checkout hanya dimuatkan apabila anda mengklik butang checkout .

anda juga boleh mencari kod untuk demo ini di GitHub.

async dengan komponen pemuatan dan ralat

Malah mungkin untuk menentukan komponen pemuatan dan/atau ralat apabila komponen async mengambil sedikit masa untuk memuatkan atau gagal memuat. Ia berguna untuk menunjukkan animasi pemuatan, tetapi ingatlah ini sekali lagi melambatkan permohonan anda. Komponen asynchronous harus kecil dan cepat untuk dimuatkan. Berikut adalah contoh:

<span><!-- Message.vue -->
</span><span><span><span><template</span>></span>
</span>  <span><span><span><h1</span>></span>New message!<span><span></h1</span>></span>
</span><span><span><span></template</span>></span>
</span>

Kesimpulan

Mencipta dan melaksanakan komponen tak segerak adalah sangat mudah dan harus menjadi sebahagian daripada rutin pembangunan standard anda. Dari perspektif UX, penting untuk mengurangkan masa beban awal sebanyak mungkin untuk mengekalkan perhatian pengguna. Mudah -mudahan tutorial ini telah membantu anda memuatkan komponen anda sendiri secara asynchronously dan memohon syarat kepada mereka untuk menangguhkan (beban malas) beban komponen.

Soalan Lazim mengenai Komponen Vue Async

Apakah faedah menggunakan komponen Vue Async? Ini bermakna komponen hanya dimuatkan apabila diperlukan, yang dapat meningkatkan prestasi aplikasi anda dengan ketara. Ini amat bermanfaat untuk aplikasi besar di mana memuat semua komponen sekaligus boleh melambatkan permohonan. Dengan memuatkan komponen secara asynchronously, anda dapat memastikan bahawa aplikasi anda tetap cepat dan responsif, memberikan pengalaman pengguna yang lebih baik. Permohonan anda agak mudah. Anda boleh menggunakan kaedah vue.component dan mengembalikan janji dalam fungsi kilang. Janji harus diselesaikan dengan definisi komponen. Berikut adalah contoh asas:

vue.component ('async-example', fungsi (menyelesaikan, menolak) { setTimeout (function () { // lulus definisi komponen ke Call Resolve

menyelesaikan ({ template: '

saya async!

' })

}, 1000)

}) dimuatkan secara asynchronously selepas kelewatan 1 saat. Malah, Vue Router mempunyai sokongan terbina dalam untuk pemisahan komponen dan pemuatan tak segerak. Apabila menentukan laluan anda, bukannya secara langsung menyediakan komponen, anda boleh menyediakan fungsi yang mengembalikan janji yang menyelesaikan komponen. Ini membolehkan anda memuatkan komponen hanya apabila diperlukan, meningkatkan prestasi aplikasi anda.

Apakah perbezaan antara komponen Vue Async dan komponen VUE biasa? Komponen Vue biasa dimuatkan secara serentak, bermakna ia dimuatkan sekaligus apabila aplikasi bermula. Sebaliknya, komponen async Vue dimuatkan secara tidak segerak, bermakna ia hanya dimuatkan apabila ia diperlukan. Ini dapat meningkatkan prestasi aplikasi anda dengan ketara, terutamanya untuk aplikasi besar dengan banyak komponen. kesilapan dengan menyediakan fungsi kedua kepada kaedah Vue.component. Fungsi ini akan dipanggil jika janji ditolak. Berikut adalah contoh:

vue.component ('async-example', fungsi (menyelesaikan, menolak) {

setTimeout (function () { // lulus definisi komponen ke Callback Resolve

menyelesaikan ({ template: '

Saya async!

' })

}, 1000)

}, fungsi (alasan) { konsol. Ralat (sebab)
})
Dalam contoh ini, jika janji ditolak, ralat akan dilog masuk ke konsol. 🎜> Ya, anda boleh menggunakan komponen Vue Async dengan VUEX. VUEX adalah perpustakaan pengurusan negeri untuk Vue.js, dan ia berfungsi dengan baik dengan komponen Vue Async. Anda boleh menghantar tindakan dan melakukan mutasi dari komponen async anda sama seperti komponen biasa. . Anda boleh menggunakan perpustakaan seperti Vue Test Utils dan Jest untuk menulis ujian unit untuk komponen anda. Walau bagaimanapun, kerana komponen async dimuatkan secara asynchronously, anda mungkin perlu menggunakan async/menunggu dalam ujian anda untuk menunggu komponen dimuatkan sebelum melakukan pernyataan. > Ya, anda boleh menggunakan komponen Vue Async dengan Vue CLI. Vue CLI adalah alat baris arahan untuk projek perancah Vue.js, dan ia mempunyai sokongan terbina dalam komponen Async. Anda boleh menggunakan kaedah vue.component untuk menentukan komponen async dalam projek Vue CLI anda. Komponen Vue Async. Salah satu cara ialah menggunakan pemisahan kod, yang membolehkan anda memecah kod anda ke dalam ketulan yang lebih kecil yang boleh dimuatkan atas permintaan. Cara lain ialah menggunakan pemuatan malas, yang membolehkan anda memuatkan komponen hanya apabila diperlukan. Anda juga boleh menggunakan prefetching dan preloading untuk memuatkan komponen di latar belakang apabila penyemak imbas terbiar.

Bolehkah saya menggunakan komponen vue async dengan nuxt.js?

Ya, anda boleh menggunakan komponen vue async dengan nuxt.js. Nuxt.js adalah rangka kerja untuk membina aplikasi Vue.js, dan ia mempunyai sokongan terbina dalam komponen Async. Anda boleh menentukan komponen async dalam projek nuxt.js anda menggunakan kaedah vue.component.

Atas ialah kandungan terperinci Mengoptimumkan prestasi aplikasi VUE dengan komponen Async. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!