предисловие
В текущем проекте вам нужно переходить на страницы других людей, чтобы войти в систему, что приводит к большому количеству переадресаций.Вам необходимо оптимизировать время белого экрана, поэтому используется каркасный экран, но каркасный экран, используемый на этот раз, не автоматически сгенерированный, это ваш собственный Стиль стука, давайте пошагово, начнем с простых🤝.
Сначала о рендерах:
Что такое каркасный экран
Скелетонный экран,АнглийскийSkeleton screen, что означает, что во время белого экрана до начала рендеринга страницы пользователь сначала видит «скелет» страницы, которая вот-вот будет отображена, а затем заменяет его после завершения рендеринга страницы.Белый экран → рендеринг завершенЭто может эффективно сократить воспринимаемое пользователем время и заставить пользователя «почувствовать», что открытие страницы происходит быстрее (по сравнению со временем полного белого экрана).
выполнить
Эта статья посвящена плагину Webpack с открытым исходным кодом.vue-skeleton-webpack-plugin, чтобы добавить каркас экрана в проект Vue.
Из-за различных требований проекта к каркасному экрану соответствующий код также будет отличаться. Скелетный экран, реализованный в этой статье,Проект на базе Vue-cli 3.x, в соответствии с разными маршрутами будут отображаться разные скелетные экраны.Для другого использования, пожалуйста, обратитесь к подключаемому модулю с открытым исходным кодом.
Приступаем 🏄.
Первый — установить плагин:
npm install vue-skeleton-webpack-plugin
vue.config.js
После завершения установки выполните следующую настройку в vue.config.js:
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')
module.exports = {
configureWebpack: (config) => {
config.plugins.push(new SkeletonWebpackPlugin({
webpackConfig: {
entry: {
app: path.join(__dirname, './src/skeleton/skeleton.js')
}
},
// SPA 下是压缩注入 HTML 的 JS 代码
minimize: true,
// 服务端渲染时是否需要输出信息到控制台
quiet: true,
// 根据路由显示骨架屏
router: {
mode: 'history',
routes: [
{
path: '/',
skeletonId: 'skeleton-home'
},
{
path: '/message',
skeletonId: 'skeleton-message'
}
]
}
}
},
css: {
// 使用 css 分离插件 mini-css-extract-plugin，不然骨架屏组件里的 <style> 不起作用，
extract: true,
}
}
вskeleton.jsЭто вход в наш экран-скелет, мы создадим его позже. Взгляните на этоrouterэтот элемент конфигурации.
routerКонфигурация определяет каркас экрана, соответствующий каждому из наших путей маршрутизации.
- router.mode Заполните режим маршрутизации, два значения являются необязательными: history | hash.
- router.routes заполняют массив маршрутизации, гдеpathсоответствует странице вvue-routerсерединаpath,skeletonIdкаркасный экранid, что будет объяснено в ближайшее время.
skeleton.js
После завершения конфигурации создайте новый экран скелета.
// src/skeleton/skeleton.js
import Vue from 'vue'
// 引入的骨架屏组件
import skeletonHome from './skeleton/skeletonHome.vue'
import skeletonMessage from './skeleton/skeletonMessage.vue'
export default new Vue({
components: {
skeletonHome,
skeletonMessage,
},
template: `
<div>
<skeletonHome id="skeleton-home" style="display:none"/>
<skeletonMessage id="skeleton-message" style="display:none"/>
</div>
`
})
В вышеуказанном коде два компонента введены соответствуютДомаа такжеСтраница сообщениякаркасный экран, где компонентыidсоответствует предыдущемуvue.config.jsвнутриskeletonId.
Вставьте код одного из компонентов каркаса экрана:
// skeletonMessage.vue
<template>
<div class="skeleton-block">
<div class="sk-loanList-header-bg"></div>
<s-messageItem/>
<s-messageItem/>
<s-messageItem/>
<s-messageItem/>
</div>
</template>
<script>
import messageItem from './components/s-messageListItem'
export default {
name: 'skeletonMessage',
components: {
's-messageItem': messageItem
}
}
</script>
<style scoped>
.skeleton-block {
width:100%;
height: 100vh;
}
.sk-loanList-header-bg {
height:88px;
background:#2954D0;
}
</style>
На самом деле это очень распространенный компонент Vue, вы можете написать стиль скелетного экрана, который хотите, в компоненте, а повторно используемые места можно разделить на компоненты. Добавьте в роут и наблюдайте за эффектом:
Пока что скелетон экрана готов, не правда ли очень просто 🤨.
Показать результаты
Здесь, чтобы смоделировать среду мобильного доступа, сначала введите производительность в Chrome DevTools, чтобы установить ее.
Эффект:
Есть еще флеш в процессе замены каркасного экрана на страницу.Не знаю,можно ли это еще оптимизировать.Я пытаюсь.
Посмотрите, как долго разные страницы отображаются в Performance:
(ps: объясните, я не знаю, что происходит. После запуска это так нечетко...)
Видно, что в случае доступа через локальную операцию (локальный доступ быстрее) страница отображает каркасный экран через 221 мс после входа на страницу, а затем завершает рендеринг страницы через 738 мс.
Если скелетный экран не добавлен сюда, это будет 738 мс белого экрана.Мы оптимизировали некоторое время белого экрана через каркасный экран🏄.
наконец
vue-skeleton-webpack-pluginЭто относительно простое экранное решение, и я полагаю, что каждый может сразу же подумать о многих недостатках.
Например:
- Вам нужно вручную написать стиль скелетного экрана.
- Отзывчивость скелетного стиля экрана при разных размерах.
- После изменения интерфейса также необходимо вручную изменить соответствующий каркас экрана.
Потому что я использовал его в своем проектеpostcss-px2remАвтоматический px to rem, поэтому избегайте некоторых недостатков.
Другие методы
Кроме того, существует множество способов использования каркасного экрана:
- page-skeleton-webpack-pluginEle.me — это плагин с открытым исходным кодом для автоматического создания каркасных экранов.
- Используйте изображение base64, чтобы создать каркасный экран, и позвольте пользовательскому интерфейсу нарисовать каркасный экран при создании проекта проекта.
Ссылаться на:nuggets.capable/post/684490…