Rumah > Artikel > hujung hadapan web > Menggunakan SSR dalam Vue untuk meningkatkan kelajuan pemuatan skrin pertama aplikasi
Menggunakan SSR dalam Vue untuk meningkatkan kelajuan pemuatan skrin pertama aplikasi
- WBOYasal
- 2023-07-19 10:07:471568semak imbas
Gunakan SSR dalam Vue untuk meningkatkan kelajuan pemuatan skrin pertama aplikasi
Dengan pembangunan berterusan teknologi bahagian hadapan, pengoptimuman prestasi aplikasi bahagian hadapan juga telah menjadi tumpuan pembangun. Dalam pembangunan bahagian hadapan moden, aplikasi satu halaman (SPA) telah menjadi arus perdana, dan dengan populariti rangka kerja seperti Vue dan React, semakin ramai pembangun memilih untuk menggunakan rangka kerja ini untuk membina aplikasi. Walau bagaimanapun, aplikasi SPA perlu memuat turun dan menghuraikan sejumlah besar kod JavaScript apabila memuatkan buat kali pertama, menghasilkan kelajuan pemuatan yang perlahan pada skrin pertama. Untuk menyelesaikan masalah ini, kami boleh menggunakan pemaparan sisi pelayan (SSR) untuk meningkatkan kelajuan pemuatan skrin pertama aplikasi.
Vue menyediakan penyelesaian pemaparan bahagian pelayan yang disokong secara rasmi, yang membolehkan kami meletakkan logik pemaparan aplikasi Vue pada bahagian pelayan untuk dilaksanakan, dan menghantar hasil pemaparan terus ke penyemak imbas, mengurangkan masa yang diperlukan untuk penyemak imbas menghuraikan JavaScript, sekali gus meningkatkan kecekapan Kelajuan pemuatan skrin pertama apl.
Berikut ialah contoh mudah yang menunjukkan cara menggunakan pemaparan sebelah pelayan dalam Vue untuk meningkatkan kelajuan pemuatan skrin pertama aplikasi.
Mula-mula, kita perlu memasang alat perancah vue-cli dan mencipta projek baharu:
npm install -g @vue/cli vue create my-app
Kemudian, kita perlu memasang beberapa kebergantungan yang diperlukan dalam projek:
cd my-app npm install vue-server-renderer express
Buat fail server.js dan tulis di dalamnya Pelayan -logik sisi, kodnya adalah seperti berikut:
const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()
server.get('*', (req, res) => {
const app = new Vue({
data: {
message: 'Hello, Vue SSR!'
},
template: '<div>{{ message }}</div>'
})
renderer.renderToString(app, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error')
return
}
res.end(`
<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title></head>
<body>${html}</body>
</html>
`)
})
})
server.listen(3000, () => {
console.log('Server is running at http://localhost:3000')
})Seterusnya, tambah arahan dalam package.json untuk memulakan pelayan:
{
"scripts": {
"serve": "node server.js"
}
}Akhir sekali, kita boleh menjalankan arahan berikut untuk memulakan pelayan:
npm run serve
Pada ketika ini, kita boleh mengakses http ://localhost:3000 untuk melihat hasil rendering pelayan. Kami akan melihat bahawa hasil pemaparan dikembalikan terus ke penyemak imbas, dan tiada masalah pemuatan tertunda, yang meningkatkan kelajuan pemuatan skrin pertama aplikasi.
Melalui contoh di atas, kita dapat melihat bahawa menggunakan teknologi pemaparan bahagian pelayan Vue boleh meningkatkan kelajuan pemuatan skrin pertama aplikasi dengan ketara. Walau bagaimanapun, pengenalan pemaparan sebelah pelayan juga membawa beberapa kerumitan tambahan, yang memerlukan kami memberi perhatian kepada beberapa tempat khas semasa proses pembangunan. Sebagai contoh, kami tidak boleh terus menggunakan objek global dalam penyemak imbas (seperti tetingkap dan dokumen) dalam pemaparan sebelah pelayan Kami perlu menggunakan objek global khas yang disediakan oleh Vue. Selain itu, anda juga perlu memberi perhatian kepada isu keserasian dan prestasi semasa proses pembangunan.
Ringkasnya, teknologi pemaparan bahagian pelayan Vue ialah alat berkuasa yang boleh membantu kami meningkatkan kelajuan pemuatan skrin pertama aplikasi. Walau bagaimanapun, terdapat beberapa pertimbangan khusus yang perlu diambil kira semasa penggunaan dan beberapa kerumitan tambahan diperkenalkan. Jika aplikasi kami memerlukan kelajuan pemuatan skrin pertama yang tinggi, maka menggunakan pemaparan sebelah pelayan ialah pilihan yang baik.
Atas ialah kandungan terperinci Menggunakan SSR dalam Vue untuk meningkatkan kelajuan pemuatan skrin pertama aplikasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!