161sh/jointrashposs
1
0
Fork 0
mirror of https://iceshrimp.dev/Crimekillz/jointrashposs.git synced 2024-11-24 01:39:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

performance: フォント定義を非同期に読み込むように（おためし）

Browse Source
This commit is contained in:
kakkokari-gtyih 2024-04-05 21:28:46 +09:00
parent ed9c5d6b9b
commit 5ba8bf7ea9
2 changed files with 39 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
app.vue
View File

@ -99,19 +99,34 @@ const i18nLinks = computed(() => head.value.link?.map((e: any) => {
return e; return e;
})); }));
/** const loadSettled = ref(false);
* 中国大陸で Google Fonts を使う裏技 const cssLinks = computed<{
* fonts.googleapis.com → fonts.googleapis.cn rel: string;
**/ href: string;
const cnHead = (locale.value === 'cn') ? [ as?: string;
{ rel: 'preconnect', href: 'https://fonts.googleapis.cn' }, }[]>(() => {
{ rel: 'preconnect', href: 'https://fonts.gstatic.cn' }, /**
{ rel: 'stylesheet', href: 'https://fonts.googleapis.cn/css2?family=Capriola&family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap' } * 中国大陸で Google Fonts を使う裏技
] : [ * fonts.googleapis.com → fonts.googleapis.cn
{ rel: 'preconnect', href: 'https://fonts.googleapis.com' }, **/
{ rel: 'preconnect', href: 'https://fonts.gstatic.com' }, const cssLinksRaw = (locale.value === 'cn') ? [
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Capriola&family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap' }, { rel: 'preconnect', href: 'https://fonts.googleapis.cn' },
]; { rel: 'preconnect', href: 'https://fonts.gstatic.cn' },
{ rel: 'stylesheet', href: '/fonts/fonts.css'},
{ rel: 'stylesheet', href: 'https://fonts.googleapis.cn/css2?family=Capriola&family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap' }
] : [
{ rel: 'preconnect', href: 'https://fonts.googleapis.com' },
{ rel: 'preconnect', href: 'https://fonts.gstatic.com' },
{ rel: 'stylesheet', href: '/fonts/fonts.css'},
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Capriola&family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap' },
];
if (loadSettled.value) {
return cssLinksRaw;
} else {
return cssLinksRaw.map((e) => e.rel === 'stylesheet' ? ({ ...e, rel: 'preload', as: 'style' }) : e);
}
});
useHead((): Record<string, any> => ({ useHead((): Record<string, any> => ({
htmlAttrs: { htmlAttrs: {
@ -141,15 +156,18 @@ useHead((): Record<string, any> => ({
// TODO // TODO
content: () => route.meta.thumbnail ? route.meta.thumbnail : `${baseUrl}/img/og/misskey-hub-screenshot-l.png`, content: () => route.meta.thumbnail ? route.meta.thumbnail : `${baseUrl}/img/og/misskey-hub-screenshot-l.png`,
}, },
...(head.value.meta?.map((e) => ({ property: e.property, content: e.content, })) || []), ...(head.value.meta?.map((e) => ({ property: e.property, content: e.content })) || []),
], ],
link: [ link: [
...(i18nLinks.value || []), ...(i18nLinks.value || []),
...cnHead, ...cssLinks.value,
], ],
script: [ script: [
{ type: "application/ld+json", children: getLdJson(route.meta.graph) } { type: "application/ld+json", children: getLdJson(route.meta.graph) }
], ],
noscript: [
{ children: cssLinks.value.filter((e) => e.rel === 'stylesheet' || (e.rel === 'preload' && e.as === 'style')).map((e) => `<link rel="stylesheet" href="${e.href}">`).join('') },
]
})); }));
/** サイト全体でひとつのScroll Posiitionを使う */ /** サイト全体でひとつのScroll Posiitionを使う */
@ -164,6 +182,12 @@ if (import.meta.client) {
window.addEventListener('resize', updatePos); window.addEventListener('resize', updatePos);
} }
onMounted(() => {
nextTick(() => {
loadSettled.value = true;
});
});
onUnmounted(() => { onUnmounted(() => {
if (import.meta.client) { if (import.meta.client) {
window.removeEventListener('scroll', updatePos); window.removeEventListener('scroll', updatePos);

1
nuxt.config.ts
View File

@ -85,7 +85,6 @@ export default defineNuxtConfig({
app: { app: {
head: { head: {
link: [ link: [
{ rel: 'stylesheet', href: '/fonts/fonts.css' },
{ rel: 'apple-touch-icon', href: '/img/icons/apple-touch-icon.png' }, { rel: 'apple-touch-icon', href: '/img/icons/apple-touch-icon.png' },
{ rel: 'shortcut icon', type: 'image/vnd.microsoft.icon', href: '/favicon.ico' }, { rel: 'shortcut icon', type: 'image/vnd.microsoft.icon', href: '/favicon.ico' },
{ rel: 'icon', type: 'image/vnd.microsoft.icon', href: '/favicon.ico' }, { rel: 'icon', type: 'image/vnd.microsoft.icon', href: '/favicon.ico' },