Добавьте экран-скелет в проект

JavaScript

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

Установить

Здесь используется решение Ele.me с открытым исходным кодом, page-skeleton-webpack-plugin.

npm install --save-dev page-skeleton-webpack-plugin
npm install --save-dev html-webpack-plugin

Сообщение об ошибке в процессе установки выглядит следующим образом

ERROR: Failed to download Chromium r515411! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOA
D" env variable to skip download.

выполнить эту команду

npm config set puppeteer_download_host=https://storage.googleapis.com.cnpmjs.org

использовать

Мой проект основан наvue-cli3Разработаны строительные леса.

Первый шаг — настроить плагин

Создаватьvue.config.jsдокумент.

const { SkeletonPlugin } = require('page-skeleton-webpack-plugin')
const path = require('path')

module.exports = {
  configureWebpack: {
    plugins: [
      new SkeletonPlugin({
        pathname: path.resolve(__dirname, './shell'), // 用来存储 shell 文件的地址
        staticDir: path.resolve(__dirname, './dist'), // 最好和 `output.path` 相同
        routes: ['/'], // 将需要生成骨架屏的路由添加到数组中
        excludes: ['.van-nav-bar', '.van-tabbar']  // 需要忽略的css选择器
      })
    ],
  },
  chainWebpack: (config) => {   // 解决vue-cli3脚手架创建的项目压缩html 干掉<!-- shell -->导致骨架屏不生效
    if (process.env.NODE_ENV !== 'development') {
      config.plugin('html').tap(opts => {
        opts[0].minify.removeComments = false
        return opts
      })
    }
    
  },
};

Создайте проект в корневом каталоге проектаshellпапка. Конфигурация chainWebpack Это решениеvue-cli3ОШИБКА, заключающаяся в том, что упакованный каркасный экран не действует

Второй шаг — изменить шаблон плагина HTML Webpack Plugin.

Внутри корневого элемента, где вы запускаете свое приложение, добавьте

<body>
  <div id="app"><!-- shell --></div>
  <!-- built files will be auto injected -->
</body>

Третий шаг: генерация операции интерфейса и запись на страницу скелета

  • На странице разработки используйте Ctrl|Cmd + enter, чтобы вызвать интерактивный интерфейс подключаемого модуля, или введите toggleBar в консоли JavaScript браузера, чтобы вызвать интерактивный интерфейс.

  • Нажмите кнопку в интерактивном интерфейсе для предварительного просмотра страницы скелета.Этот процесс может занять около 20 секунд.Когда плагин подготовит страницу скелета, он автоматически откроет страницу предварительного просмотра через браузер.

  • Отсканируйте QR-код на странице предварительного просмотра, вы можете просмотреть страницу скелета на мобильном телефоне, вы можете напрямую редактировать исходный код на странице предварительного просмотра и нажать кнопку записи в правом верхнем углу, чтобы записать страницу скелета в оболочку. папка.

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

окончательный эффект

демонстрационный адрес

vbook.langpz.com

Мой блог и адрес GitHub

github.com/lanpangzhi

blog.langpz.com

Ссылаться на

GitHub.com/минет/минет это... GitHub.com/E?Fe/Прошел…

Категории