Size: a a a

Nuxt.js — русскоговорящее сообщество

2020 November 20

D

DreaMinder in Nuxt.js — русскоговорящее сообщество
Denis
ребят, привет, кто как избавлялся от FOUT (Flash Of Unstyled Text) ?
Подключаю шрифты с помощью webfontloader:
webfontloader: {
   google: {
     families: ['Fira+Sans:300,400,500,600,700', 'Roboto:300,400,500,600,700'],
   },
 },
лоадер призван наоборот ускорить загрузку, он начинает работать только после того как запускается жс. Он не борется с FOUT

лучше подключи через цсс и добавь прелоад-хинты на файлы шрифтов. А в объявлении самих шрифтов выставь стратегию рендера, вроде font-display: block;
источник

D

Denis in Nuxt.js — русскоговорящее сообщество
DreaMinder
лоадер призван наоборот ускорить загрузку, он начинает работать только после того как запускается жс. Он не борется с FOUT

лучше подключи через цсс и добавь прелоад-хинты на файлы шрифтов. А в объявлении самих шрифтов выставь стратегию рендера, вроде font-display: block;
хм-хм, попробую. Спасибо!
источник

MT

Matvey Tarasov in Nuxt.js — русскоговорящее сообщество
Привет. Как писать юнит тесты на компоненты в nuxt, если компоненты юзают модули и плагины?
источник

V💊

Vladimir 💉 💊 Voytenk... in Nuxt.js — русскоговорящее сообщество
Matvey Tarasov
Привет. Как писать юнит тесты на компоненты в nuxt, если компоненты юзают модули и плагины?
а что ты хочешь протестировать?
источник

MT

Matvey Tarasov in Nuxt.js — русскоговорящее сообщество
При обычном подходе через jest или vue test utils ошибка, так как в инстансе нет всех тех хелперов, которые туда накст засовывает
источник

MT

Matvey Tarasov in Nuxt.js — русскоговорящее сообщество
Vladimir 💉 💊 Voytenko
а что ты хочешь протестировать?
Логику компонента, к примеру
источник

V💊

Vladimir 💉 💊 Voytenk... in Nuxt.js — русскоговорящее сообщество
Matvey Tarasov
Логику компонента, к примеру
ну понятно, что логику, другое и не тестируют
источник

MT

Matvey Tarasov in Nuxt.js — русскоговорящее сообщество
К примеру, хочу засетить data: {name: "Matvey"}, хочу чтобы у computed свойства upperName было значение 'MATVEY"
источник

MT

Matvey Tarasov in Nuxt.js — русскоговорящее сообщество
Условный пример
источник

СР

Сергей Рыжков... in Nuxt.js — русскоговорящее сообщество
DreaMinder
лоадер призван наоборот ускорить загрузку, он начинает работать только после того как запускается жс. Он не борется с FOUT

лучше подключи через цсс и добавь прелоад-хинты на файлы шрифтов. А в объявлении самих шрифтов выставь стратегию рендера, вроде font-display: block;
Кинь пример, пожалуйста!
источник

D

DreaMinder in Nuxt.js — русскоговорящее сообщество
Сергей Рыжков
Кинь пример, пожалуйста!
const fonts = [
 '/fonts/font-bold.woff2'
].map(path => ({
 href: path,
 rel: 'preload',
 type: 'font/woff2',
 as: 'font'
}))

head: {
link: fonts
}
источник

СР

Сергей Рыжков... in Nuxt.js — русскоговорящее сообщество
DreaMinder
const fonts = [
 '/fonts/font-bold.woff2'
].map(path => ({
 href: path,
 rel: 'preload',
 type: 'font/woff2',
 as: 'font'
}))

head: {
link: fonts
}
Надо будет попиобывпть
источник

СР

Сергей Рыжков... in Nuxt.js — русскоговорящее сообщество
DreaMinder
const fonts = [
 '/fonts/font-bold.woff2'
].map(path => ({
 href: path,
 rel: 'preload',
 type: 'font/woff2',
 as: 'font'
}))

head: {
link: fonts
}
++
источник

N

Nano.Karmabot.chat in Nuxt.js — русскоговорящее сообщество
Fantastic! DreaMinder got +1 from SRyzhkov. 23 karma in total.
источник

m

mrFANRA in Nuxt.js — русскоговорящее сообщество
ребята, я правильно понимаю что vue-lazy-hydration имеет смысл использовать в основном для компонентов которые как правило вне видимости пользователя и напичканы относительно большим набором ивентов, данных и тд?
источник

m

mrFANRA in Nuxt.js — русскоговорящее сообщество
например карточки товаров которые уходят вниз большим кол-ом
источник

D

Denis in Nuxt.js — русскоговорящее сообщество
DreaMinder
лоадер призван наоборот ускорить загрузку, он начинает работать только после того как запускается жс. Он не борется с FOUT

лучше подключи через цсс и добавь прелоад-хинты на файлы шрифтов. А в объявлении самих шрифтов выставь стратегию рендера, вроде font-display: block;
добрался к прелоад-хинту..
это мне надо в nuxt.config такое прописать для каждого шрифта?
<link rel="preload" href="myfont.woff2" as="font" type="font/woff2" crossorigin>
источник

D

DreaMinder in Nuxt.js — русскоговорящее сообщество
mrFANRA
ребята, я правильно понимаю что vue-lazy-hydration имеет смысл использовать в основном для компонентов которые как правило вне видимости пользователя и напичканы относительно большим набором ивентов, данных и тд?
Ага
источник

D

DreaMinder in Nuxt.js — русскоговорящее сообщество
Denis
добрался к прелоад-хинту..
это мне надо в nuxt.config такое прописать для каждого шрифта?
<link rel="preload" href="myfont.woff2" as="font" type="font/woff2" crossorigin>
Ага. Но это если шрифты подключаются через папку Статик и свой цсс файл
источник

D

DreaMinder in Nuxt.js — русскоговорящее сообщество
Если через ассетс, там другой способ вроде, через кофиг вебпака
источник