از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
مسیرهای بارگذاری تنبل با روتر Vue با نوار پیشرفت به‌طور پیش‌فرض، هنگام نوشتن یک برنامه تک صفحه‌ای Vue.js (SPA)، همه دارایی‌های لازم مانند جاوا اسکریپت و فایل‌های CSS با هم بارگیری می‌شوند. page بارگذاری شده است. هنگامی که با فایل های حجیم سروکار دارید، این می تواند منجر به تجربه کاربری نامطلوب شود. به کمک Webpack امکان بارگذاری…
سرفصلهای مطلب
معرفی
به طور پیش فرض، هنگام نوشتن یک Vue.js Single Page Application (SPA)، همه دارایی های لازم مانند جاوا اسکریپت و فایل های CSS با هم بارگذاری می شوند. page بارگذاری شده است. هنگامی که با فایل های حجیم سروکار دارید، این می تواند منجر به تجربه کاربری نامطلوب شود.
با کمک بسته وب، امکان بارگذاری صفحات وجود دارد روی تقاضا در Vue.js با استفاده از import() تابع به جای import کلمه کلیدی.
چرا بارگذاری روی تقاضا؟
یک SPA معمولی در Vue.js با داشتن تمام قابلیت‌ها و دارایی‌ها با هم بسته‌بندی و تحویل داده می‌شود تا به کاربران اجازه دهد بدون نیاز به بازخوانی صفحات از برنامه استفاده کنند. اگر به صراحت برنامه را برای بارگذاری صفحات طراحی نکرده اید روی همه صفحات به یکباره بارگیری می شوند یا با استفاده از پهنای باند غیر ضروری و کاهش سرعت از قبل واکشی/از پیش بارگذاری می شوند. page بارگذاری.
این امر به ویژه برای SPAهای بزرگ با صفحات زیاد بد است. افرادی که اتصال اینترنت آهسته دارند یا دستگاه‌های ارزان قیمتی مانند تلفن همراه دارند، تجربه کاربری بدی خواهند داشت. با بارگذاری روی کاربران هرگز نیازی به دانلود بیشتر از نیاز خود ندارند.
Vue.js با هیچ نشانگر بارگیری برای ماژول های پویا همراه نیست. حتی با واکشی و بارگذاری اولیه – هیچ نشانگر بصری به کاربران اجازه نمی‌دهد تا بدانند بارگیری چگونه پیش می‌رود. ما همچنین یک نوار پیشرفت برای بهبود تجربه کاربر اضافه خواهیم کرد.
آماده سازی پروژه
ابتدا به راهی نیاز داریم تا نوار پیشرفت ما با روتر Vue ارتباط برقرار کند. برای انجام این کار، ما از الگوی اتوبوس رویداد.
Event Bus اساساً یک نمونه Vue تک‌تنه است. از آنجایی که تمام نمونه های Vue دارای یک سیستم رویداد با استفاده از $روی و $emit، می توانیم از آن برای انتقال رویدادها در هر نقطه از برنامه خود استفاده کنیم.
بیایید یک فایل جدید ایجاد کنیم، eventHub.js در components فهرست راهنما:
import Vue from 'vue'
export default new Vue()
اکنون، Webpack را برای غیرفعال کردن واکشی و بارگذاری اولیه پیکربندی می کنیم. ما می‌توانیم این کار را به‌صورت جداگانه برای هر تابع انجام دهیم یا آن را به صورت سراسری غیرفعال کنیم. ایجاد یک vue.config.js فایل در root پوشه را وارد کنید و پیکربندی را برای غیرفعال کردن واکشی و بارگذاری اولیه اضافه کنید:
module.exports = {
chainWebpack: (config) => {
// Disable prefetching and preloading
config.plugins.delete('prefetch')
config.plugins.delete('preload')
},
}
اضافه کردن مسیرها و صفحات
ما از Vue Router استفاده خواهیم کرد. برای این منظور، استفاده خواهیم کرد npx برای نصب آن:
$ npx vue add router
حالا بیایید فایل روتر خود را که معمولاً در زیر قرار دارد ویرایش کنیم router/index.js و مسیرهای ما را برای استفاده از آن به روز کنیم import() تابع، به جای import بیانیه:
این پیکربندی پیش فرض است:
import About from '../views/About.vue'
{
path: '/about',
name: 'About',
component: About
},
ما آن را به:
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue')
},
اگر ترجیح می دهید انتخاب کنید کدام صفحات بارگیری شوند روی تقاضا به جای غیرفعال کردن واکشی و بارگذاری اولیه در سطح جهانی، از نظرات ویژه Webpack به جای پیکربندی Webpack در vue.config.js:
import(
/* webpackPrefetch: true */
/* webpackPreload: true */
'../views/About.vue'
)
تفاوت اصلی بین import() و import این است که ماژول های ES بارگیری می شوند import() در زمان اجرا بارگذاری می شوند در حالی که آنهایی که با آن بارگذاری می شوند import در طول زمان کامپایل بارگذاری می شوند. این بدان معنی است که ما می توانیم بارگذاری ماژول ها را با آن به تعویق بیاندازیم import() و فقط در صورت لزوم بارگیری کنید.
پیاده سازی نوار پیشرفت
از آنجایی که تخمین دقیق زمانی وجود ندارد page بارگذاری خواهد شد (یا اگر اصلاً بارگیری شود)، نمی توانیم واقعا نوار پیشرفت ایجاد کنید هیچ راهی برای بررسی چقدر وجود ندارد page یا بارگیری کرده است. ما چی می تواند انجام دهد ایجاد یک نوار پیشرفت است که وقتی تمام می شود page بارها
همه چیز در این بین واقعاً پیشرفت را منعکس نمی کند، بنابراین در بیشتر موارد، پیشرفت تصویر شده فقط جهش های تصادفی است.
نصب کنیم lodash.random اول، زیرا ما از آن بسته برای انتخاب تعدادی اعداد تصادفی در طول تولید نوار پیشرفت استفاده خواهیم کرد:
$ npm i lodash.random
سپس، بیایید یک جزء Vue ایجاد کنیم – components/ProgressBar.vue:
<template>
<div :class="{'loading-container': true, loading: isLoading, visible: isVisible}">
<div class="loader" :style="{ width: progress + '%' }">
<div class="light"></div>
</div>
<div class="glow"></div>
</div>
</template>
اکنون، به آن جزء، یک اسکریپت اضافه می کنیم. در داخل آن اسکریپت، ما ابتدا import random و $eventHub، همانطور که از آنها استفاده خواهیم کرد:
<script>
import random from 'lodash.random'
import $eventHub from '../components/eventHub'
</script>
اکنون، پس از وارد کردن، در همان اسکریپت، می‌توانیم چند متغیر را تعریف کنیم که از آنها استفاده خواهیم کرد:
// Assume that loading will complete under this amount of time.
const defaultDuration = 8000
// How frequently to update
const defaultInterval = 1000
// 0 - 1. Add some variation to how much the bar will grow at each interval
const variation = 0.5
// 0 - 100. Where the progress bar should start from.
const startingPoint = 0
// Limiting how far the progress bar will get to before loading is complete
const endingPoint = 90
با وجود آنها، بیایید منطق بارگیری ناهمزمان اجزا را بنویسیم:
export default {
name: 'ProgressBar',
data: () => ({
isLoading: true, // Once loading is done, start fading away
isVisible: false, // Once animate finish, set display: none
progress: startingPoint,
timeoutId: undefined,
}),
mounted() {
$eventHub.$روی('asyncComponentLoading', this.start)
$eventHub.$روی('asyncComponentLoaded', this.stop)
},
methods: {
start() {
this.isLoading = true
this.isVisible = true
this.progress = startingPoint
this.loop()
},
loop() {
if (this.timeoutId) {
clearTimeout(this.timeoutId)
}
if (this.progress >= endingPoint) {
return
}
const size = (endingPoint - startingPoint) / (defaultDuration / defaultInterval)
const p = Math.round(this.progress + random(size * (1 - variation), size * (1 + variation)))
this.progress = Math.min(p, endingPoint)
this.timeoutId = setTimeout(
this.loop,
random(defaultInterval * (1 - variation), defaultInterval * (1 + variation))
)
},
stop() {
this.isLoading = false
this.progress = 100
clearTimeout(this.timeoutId)
const self = this
setTimeout(() => {
if (!self.isLoading) {
self.isVisible = false
}
}, 200)
},
},
}
در mounted() تابع، خواهید دید که ما از گذرگاه رویداد برای گوش دادن به بارگذاری ناهمزمان مؤلفه استفاده می کنیم. زمانی که روتر به ما بگوید که به a پیمایش کرده‌ایم، انیمیشن بارگیری را شروع می‌کند page که هنوز بارگذاری نشده است
و در نهایت، اجازه دهید کمی سبک به آن اضافه کنیم:
<style scoped>
.loading-container {
font-size: 0; /* remove space */
position: fixed;
top: 0;
left: 0;
height: 5px;
width: 100%;
opacity: 0;
display: none;
z-index: 100;
transition: opacity 200;
}
.loading-container.visible {
display: block;
}
.loading-container.loading {
opacity: 1;
}
.loader {
background: #23d6d6;
display: inline-block;
height: 100%;
width: 50%;
overflow: hidden;
border-radius: 0 0 5px 0;
transition: 200 width ease-out;
}
.loader > .light {
float: right;
height: 100%;
width: 20%;
background-image: linear-gradient(to right, #23d6d6, #29ffff, #23d6d6);
animation: loading-animation 2s ease-in infinite;
}
.glow {
display: inline-block;
height: 100%;
width: 30px;
margin-left: -30px;
border-radius: 0 0 5px 0;
box-shadow: 0 0 10px #23d6d6;
}
@keyframes loading-animation {
0% {
margin-right: 100%;
}
50% {
margin-right: 100%;
}
100% {
margin-right: -10%;
}
}
</style>
حالا بیایید ما را اضافه کنیم ProgressBar به ما App.vue یا یک مؤلفه layout تا زمانی که در همان مؤلفه نمای روتر باشد. ما می‌خواهیم در طول چرخه عمر برنامه در دسترس باشد:
<template>
<div>
<progress-bar></progress-bar>
<router-view></router-view>
<!--- your other components -->
</div>
</template>
<script>
import ProgressBar from './components/ProgressBar.vue'
export default {
components: { ProgressBar },
}
</script>
همه اینها منجر به یک نوار پیشرفت شیک می شود که به شکل زیر است:
نوار پیشرفت ماشه برای صفحات لود شده با تنبلی
ما ProgressBar در حال گوش دادن است روی گذرگاه رویداد برای رویداد بارگیری مؤلفه ناهمزمان. وقتی چیزی به این شکل بارگذاری می‌شود، می‌خواهیم انیمیشن را فعال کنیم. بیایید یک محافظ مسیر به روتر اضافه کنیم تا این رویدادها را دریافت کند:
import $eventHub from '../components/eventHub'
router.beforeEach((to, from, next) => {
if (typeof to.matched(0)?.components.default === 'function') {
$eventHub.$emit('asyncComponentLoading', to) // Start progress bar
}
next()
})
router.beforeResolve((to, from, next) => {
$eventHub.$emit('asyncComponentLoaded') // Stop progress bar
next()
})
برای تشخیص اینکه آیا page تنبل بارگذاری شده است، باید بررسی کنیم که آیا مؤلفه به عنوان یک پویا تعریف شده است یا خیر import یعنی component: () => import('...') بجایcomponent: MyComponent.
این کار با typeof to.matched(0)?.components.default === 'function'. اجزایی که با import بیانیه به عنوان توابع طبقه بندی نمی شود.
نتیجه
در این مقاله، نیاز به بارگذاری تنبلی صفحات خاص را بررسی کرده ایم. ما واکشی و بارگذاری اولیه را در برنامه Vue خود غیرفعال کرده ایم و یک مؤلفه نوار پیشرفت ایجاد کرده ایم که برای شبیه سازی پیشرفت واقعی در هنگام بارگیری نمایش داده می شود. page.
منتشر شده در 1403-01-19 09:28:03
