Предварительная проработка каркаса экрана (page-skeleton-webpack-plugin)

Vue.js
Предварительная проработка каркаса экрана (page-skeleton-webpack-plugin)

Автор: маленькая картошка biubiubiu

Блог Сад:www.cnblogs.com/HouJiao/

Самородки:Талант /user/243617…

Публичный аккаунт WeChat: мысли Tudou Mom (сканируйте код, чтобы следовать ему, вместе сосите кошек, вместе слушайте истории и вместе изучайте передовые технологии)

Содержание статей автора исходит из его собственной практики.Если вы считаете, что это вам помогает, можете поставить лайк ❤️ Поощряйте или оставляйте ценные комментарии

предисловие

Я видел это много в последнее время骨架屏На самом деле, я редко слышал это слово раньше.骨架屏эта фраза. Просто когда я просматриваю веб-сайт, я часто вижу некоторые страницы, отображаемые, когда реальные данные еще не получены.占位图形.

Собственно это и было описано ранее骨架屏, то есть общая структура страницы показывается пользователю до загрузки данных страницы, а содержимое страницы отображается подробно после получения данных. Это骨架屏по сравнению с традиционнымloading, что значительно улучшает用户体验.

Итак, сегодняшняя статья骨架屏的初探与实践, сам контент非常简单, но есть еще некоторые детали, на которые нужно обратить внимание, иначе на практике не всегда будут появляться нормальные результаты.

page-skeleton-webpack-plugin

page-skeleton-webpack-pluginда饿了么Команда разработалаwebpackплагин, это插件Различные страницы каркасного экрана могут быть созданы в соответствии с разными страницами.

Затем примените это на практике в проектеpage-skeleton-webpack-plugin.

Описание Проекта

Этот проект используетvue-cli2Сгенерированный проект, наполнение компонентов в проекте тоже очень простое, можно戳这里Получите код проекта.

установка плагина page-skeleton-webpack

Установитьpage-skeletonЭто также очень просто, просто выполните команду напрямую:npm install --save-dev page-skeleton-webpack-pluginВот и все.

Уведомление文档Есть четкие инструкции по установке.html-webpack-plugin, этот проект был установленhtml-webpack-plugin. Если он не установлен в вашем проектеhtml-webpack-plugin, который может быть выполненnpm install --save-dev html-webpack-pluginустановить.

Тогда вам нужно начать заниматься.

конфигурация веб-пакета

Во-первых, нам нужно开发环境генерируется в骨架屏код.

Итак, первый шаг —开发环境Средняя конфигурацияSkeletonPlugin.

// 代码位置：/skeleton-screen-demo/build/webpack.dev.conf.js

// 步骤1：引入骨架屏模块
const { SkeletonPlugin } = require('page-skeleton-webpack-plugin')

// 省略代码...

plugins: [

    // 省略其他插件的配置代码...
    
    // 步骤2：在插件中进行配置
    new SkeletonPlugin({
      pathname: path.resolve(__dirname, '../shell'), // the path to store shell file
      staticDir: path.resolve(__dirname, '../dist'), // the same as the `output.path`
      routes: ['/'], // Which routes you want to generate skeleton screen
  })
]

SkeletonPluginТри обязательных элемента конфигурации для плагина:pathname,staticDir,routes, функции этих трех элементов конфигурации следующие:

элемент конфигурации тип данных эффект
pathname String Путь сохранения кода каркасного экрана, сгенерированного нажатием кнопки сохранения в среде разработки.
staticDir String Статический файл ресурсов скелетного экрана, сгенерированный во время упаковки (официальная документацияwebpackВыходной каталог пакета тот же)
routes Array Нужно сгенерировать трассировку каркасного экрана (и в проекте路由配置изpathпоследовательный)

запустить проект

Среда разработкиwebpackПосле завершения настройки используйтеnpm run devЗапустите проект.
Но, к сожалению, что-то пошло не так 😤 😤 😤.

После сообщения об ошибке пошел проверять/skeleton-screen-demo/node_modules/page-skeleton-webpack-plugin/src/util/index.jsфайл, обнаружил, что файл представляет файл с именемwebpack-logмодуль, поэтому решение состоит в том, чтобы установитьwebpack-log: npm install webpack-log --save-dev.

Повторно запустите проект после успешной установки.

Можно обнаружить, что имя проекта было успешно запущено, и доступ к странице возможен в обычном режиме.

Если в это время控制台Вы можете увидеть следующую информацию для печати, чтобы доказать, чтоpage-skeleton-webpack-pluginКонфигурация прошла успешно.

Генерировать файл экрана скелета

Первый тип в консолиtoggleBar, а затем нажмите «Ввод».

Вы можете видеть, что есть横条,点击это横条Начните генерировать экран скелета预览页面.

Процесс генерации должен ждать более десяти секунд

Вы можете увидеть нашу страницу骨架屏из预览效果вышел; в预览页面В третьем столбце вы также можете изменить сгенерированный код.

Далее нажмите骨架屏预览页面в правом верхнем углу按钮, ты сможешь骨架屏代码Сохранить какwebpackв каталоге, настроенном в .

нажмите保存按钮После этого вы можете увидеть, что соответствующий локальный骨架屏代码文件.

Конфигурация каркасного экрана в производственной среде

Вышеуказанный ряд операций находится в开发环境практиковать, чтобы генерировать骨架屏код. Тогда теперь необходимо骨架屏применимый к生产环境середина.

конфигурация веб-пакета

Во-первых, нам нужно生产环境написать в骨架屏Конфигурация.

// 代码位置：/skeleton-screen-demo/build/webpack.pro.conf.js

// 步骤1：引入骨架屏模块
const { SkeletonPlugin } = require('page-skeleton-webpack-plugin')

// 省略代码...

plugins: [

    // 省略其他插件的配置代码...
    
    // 步骤2：在插件中进行配置
    new SkeletonPlugin({
      pathname: path.resolve(__dirname, '../shell'), // the path to store shell file
      staticDir: path.resolve(__dirname, '../dist'), // the same as the `output.path`
      routes: ['/'], // Which routes you want to generate skeleton screen
  })
]

Эта конфигурация и предыдущая вwebpack.dev.conf.jsтакая же конфигурация в .
можно записать прямо вwebpack.base.conf.jsТаким образом, вы можете избежать повторного написания конфигурации.

Конфигурация файла шаблона

в проекте跟模板добавить примечание<!-- shell --> .

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>骨架屏初探</title>
  </head>
  <body>
    <div id="app">
      <!-- shell -->
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

👉👉👉 Тут нужно быть внимательным 👉👉👉

веб-пакетhtml-webpack-pluginЕсть статья о压缩移除注释конфигурация, когда строительные леса генерируют проект, это配置项По умолчанию установлено значениеtrue,Прямо сейчас移除в шаблоне注释. Но когда骨架屏Здесь<!-- shell -->Комментарии обязательны. Итак, нам нужно поставить это压缩移除注释Элемент конфигурации изменен наfalse,Прямо сейчас保留注释, в противном случае после того, как следующий проект будет упакован и развернут,骨架屏не вступит в силу.

new HtmlWebpackPlugin({
   minify: {
     removeComments: false   // 压缩移除注释的配置项修改为false
},

Упаковать и скомпилировать проект

Затем упакуйте и скомпилируйте проект.

Разверните проект, чтобы просмотреть результаты

Последний шаг – реализация проекта部署, на этот раз я использовалnginxРазверните проект. После успешного развертывания проекта мы можем открыть браузер, чтобы увидеть骨架屏Эффект.

Поскольку содержимое самого компонента очень простое, а время загрузки короткое, необходимо установить средства отладки браузера.NetWork -> Disable cache,Прямо сейчас禁用缓存; также установите скорость загрузки на3G(Или настроить скорость загрузки).
Таким образом, вы можете ясно видеть骨架屏Эффект.

Генерация многостраничного скелетного экрана

多页面骨架屏Генерация также очень проста, помимо新建组件,配置路由Кроме того, необходимо такжеSkeletonPluginнастроить.

new SkeletonPlugin({
      pathname: path.resolve(__dirname, '../shell'), // the path to store shell file
      staticDir: path.resolve(__dirname, '../dist'), // the same as the `output.path`
      routes: ['/', '/test'], // Which routes you want to generate skeleton screen
})

существуетSkeletonPlugin.routesДобавить новое路由, затем в骨架屏Интерфейс предварительного просмотра может переключать недавно добавленный маршрут для создания нового интерфейса предварительного просмотра скелета экрана.

После генерации нужно нажать保存按钮Сохраните код каркаса экрана.

После сохранения новый будет сгенерирован локально骨架屏код.

Затем вы можете упаковать и развернуть.

Внимание пожалуйста

особенный здесь特别注意да,page-skeleton-webpack-pluginИнтерфейс предварительного просмотра скелетного экрана имеетRoutes按钮используется для切换路由генерировать разные страницы骨架屏预览.

можно увидеть щелчок切换按钮это после路由без#Символический, который используется по умолчанию при настройке маршрутизации.hashрежим, поэтому в浏览器Полный доступ к обоим компонентамurlдля:

http://localhost:8080/#/  
http://localhost:8080/#/test

Это различие привело к добавлениюtestПосле роутинга я переключился на интерфейс превью/testПри маршрутизации интерфейс предварительного просмотра по-прежнему генерирует/Страница экрана скелета маршрутизации.

Причина этой проблемы на самом деле должна быть прослежена доpage-skeleton-webpack-pluginРеализация, когда мы переключаем маршруты на странице предварительного просмотра,page-skeleton-webpack-pluginПлагин будет основан на нашем выборе路由чтобы получить路由соответствующий компонент内容, тогда сборка内容генерировать骨架屏页面.

из-заpage-skeleton-webpack-pluginМаршрут без#символическийhistoryшаблон, в то время как шаблон маршрутизации в реальном проектеhashрежиме, что приводит кSkeletonPluginне соответствует действительности组件, скелетный экран не может быть сгенерирован правильно.

Решение этой проблемы также очень простое, то есть установить маршрутизацию проекта наhistoryмодель.

// 代码位置：/skeleton-screen-demo/src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Test from '@/components/Test'
Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/test',
      name: 'Test',
      component: Test
    }
  ]
})

Эта проблема меня очень давно беспокоила на практике, вновь добавленные страницы всегда не имеют нормального эффекта, и в документации это не упоминается. Позже я сравнил ту, что дала официальнаяsaleПример меня просто осенил.

Наконец, давайте взглянем на эффект многостраничного каркасного экрана.

наконец

На этом предварительное исследование этого экрана-скелета завершено.Содержание очень простое, но есть также одна или две небольшие ямы, которых необходимо избегать, чтобы идеально добиться эффекта экрана-скелета.

о

автор

маленький картофель биубиубиу

Новичок в области фронтенда, который усердно учится, знания безграничны. Я твердо верю, что пока ты не перестаешь учиться, ты всегда можешь достичь того, чего хочешь.

В то же время он также человек, который любит котят.В доме есть красивая невысокая кошка по имени Тудо.

Блог Парк

www.cnblogs.com/HouJiao/

Наггетс

Талант /user/243617…

Публичный аккаунт WeChat

Мысли мамы картошки

Первоначальная цель общедоступной учетной записи WeChat — записать несколько историй о себе и окружающих вас людях, а также время от времени обновлять некоторые технические статьи.

Приглашаем всех сканировать код и следить за ним, вместе сосать котиков, вместе слушать истории и вместе изучать передовые технологии.

Примечание автора

Небольшое резюме, приветствую всеобщее руководство~

Категории