Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Vite causes FOUC #8717

Closed
ThatOneCalculator opened this issue May 21, 2022 · 25 comments · Fixed by #8752
Closed

Vite causes FOUC #8717

ThatOneCalculator opened this issue May 21, 2022 · 25 comments · Fixed by #8752
Labels
🐛Bug Unexpected behavior packages/frontend Client side specific issue/PR 🐢Performance Efficiency related issue/PR

Comments

@ThatOneCalculator
Copy link
Contributor

💡 Summary

This:

2022-05-20.19-16-59.mp4
5c0e98f52c7403d301079099df74fb7f4dbe5da614773a43ce89bb5feb66aaef0bc6a5a75a243a8855c8717d7ca2e7f126ba72ed5b591919608ffd4373cd77f2.mp4

📝 Steps to Reproduce

  1. Load Misskey

This seems to be a problem with Vite, as this didn't happen before Vite.

📌 Environment

Misskey version: Latest git (12.110.1)
Your OS: Linux, Android
Your browser: Firefox, Chrome
@ThatOneCalculator ThatOneCalculator added the ⚠️bug? This might be a bug label May 21, 2022
@syuilo
Copy link
Member

syuilo commented May 21, 2022

This seems to be a vite issue. (FOUC)

@ThatOneCalculator
Copy link
Contributor Author

I think it's the problem of Vite not loading styles at startup. Seems like I'm not the only one with this issue: https://stop.voring.me/notes/90itqps1g3

@tamaina tamaina changed the title On startup, Misskey shows the letter g briefly? Vite causes FOUC May 22, 2022
@tamaina
Copy link
Contributor

tamaina commented May 22, 2022

I have asked the question on the Vite Discord but received no response.

Note
PR of Vite #8575

@tamaina
Copy link
Contributor

tamaina commented May 22, 2022

いつの間にかVite 3のalphaが出ておる…

@tamaina
Copy link
Contributor

tamaina commented May 22, 2022 •
edited
Loading

もしかしたら、Viteのバージョンを2.9.9などに上げれば直るかもしれない

@Johann150 Johann150 added the packages/frontend Client side specific issue/PR label May 22, 2022
@4ioskd
Copy link

4ioskd commented May 24, 2022 •
edited
Loading

FYI: 現在はv3.0.0-alpha.2が出てます
https://github.com/vitejs/vite/releases

@ThatOneCalculator
Copy link
Contributor Author

I switched my instance to build with Vite 3 Alpha 4 (with the Alpha 3 Vue plugin) and sadly it didn't fix the issue.

@NovaAndrom3da
Copy link

NovaAndrom3da commented May 27, 2022 •
edited
Loading

Oh. I've had this/a very similar issue with vite. Try disabling HMR (hot module replacement) in the vite json config file.

  "hmr": false,

Although, doing this will cause you to have to restart the server each time you make a change on the server, which shouldn't be a big deal if you are attempting to run in a production deployment, but would get annoying in a development environment.

@NovaAndrom3da
Copy link

This can sometimes be fixed by setting the HMR client port to 443 (as mentioned here: vitejs/vite#4259) but (IIRC) it didn't work for me when I had this issue.

@NovaAndrom3da
Copy link

Just to make sure, do you see connection to server lost, polling for restart when you open DevTools?

@tamaina
Copy link
Contributor

tamaina commented May 27, 2022

We are using vite build --watch and do not use HMR, so I don't think it will solve the problem.

@tamaina
Copy link
Contributor

tamaina commented May 27, 2022 •
edited
Loading

I confirm that updating vite to 2.9.9 and server.hmr: false does not solve the problem in my local environment.

@tamaina tamaina added 🐛Bug Unexpected behavior ❓needs more investigation A bug whose causes are unknown and removed ⚠️bug? This might be a bug labels May 27, 2022
@tamaina
Copy link
Contributor

tamaina commented May 28, 2022

Issue出すにしてもminimal reproducible exampleだと再現しない…

@acid-chicken
Copy link
Member

image

FOUC だから当たり前だけど CSS の読み込みタイミングが遅すぎる

ここら辺関連しそう？ vitejs/vite#2460 (comment)

@acid-chicken
Copy link
Member

現に preload 指定してる fontawesome の css は一番に読み込まれているので、rollup でビルドした結果を元に必要な必須チャンクを決定して、HTML 生成時に注入することが解決になりそう。

misskey/packages/backend/src/server/web/views/base.pug

Line 33 in 708fba9

link(rel='preload' href='/assets/fontawesome/css/all.css' as='style')

@acid-chicken
Copy link
Member

image

手前の読み込みが長すぎて待ってくれてなさそう

もしかしてここが原因では

misskey/packages/client/src/scripts/theme.ts

Lines 13 to 36 in 38e6202

export const lightTheme: Theme = await import('@/themes/_light.json5');
export const darkTheme: Theme = await import('@/themes/_dark.json5');
export const themeProps = Object.keys(lightTheme.props).filter(key => !key.startsWith('X'));
export const builtinThemes = [
await import('@/themes/l-light.json5'),
await import('@/themes/l-coffee.json5'),
await import('@/themes/l-apricot.json5'),
await import('@/themes/l-rainy.json5'),
await import('@/themes/l-vivid.json5'),
await import('@/themes/l-cherry.json5'),
await import('@/themes/l-sushi.json5'),
await import('@/themes/d-dark.json5'),
await import('@/themes/d-persimmon.json5'),
await import('@/themes/d-astro.json5'),
await import('@/themes/d-future.json5'),
await import('@/themes/d-botanical.json5'),
await import('@/themes/d-cherry.json5'),
await import('@/themes/d-ice.json5'),
await import('@/themes/d-pumpkin.json5'),
await import('@/themes/d-black.json5'),
] as Theme[];

@acid-chicken
Copy link
Member

acid-chicken commented May 28, 2022 •
edited
Loading

@tamaina applyTheme の処理どうせ CSS Paint 挟むから実質非同期だし、 src/scripts/theme.ts で即時読み込みせずに遅延読み込みにするか Promise のまま渡してもいいんじゃない？

@tamaina
Copy link
Contributor

tamaina commented May 28, 2022

@acid-chicken なるほど、テーマ周りは深く考えずにrequireを置換したのでリファクタの余地がありそう

@acid-chicken
Copy link
Member

直接的原因であるないに関わらずこれは読み込みに大きな問題を引き起こしている

@acid-chicken acid-chicken added 🐢Performance Efficiency related issue/PR and removed ❓needs more investigation A bug whose causes are unknown labels May 28, 2022
@acid-chicken
Copy link
Member

acid-chicken commented May 28, 2022 •
edited
Loading

image

await import が並ぶと黄色の枠のような虚無区間を生成することになる

@tamaina
Copy link
Contributor

tamaina commented May 28, 2022 •
edited
Loading

(良く考えたらせめてPromise.allを使うべきだったわ…)

@tamaina
Copy link
Contributor

tamaina commented May 28, 2022 •
edited
Loading

（PR出す前に先にコメント書くけど）テーマは関係ないっぽいなぁ

image
image

@tamaina tamaina mentioned this issue May 28, 2022
Merged
@tamaina
Copy link
Contributor

tamaina commented May 28, 2022

仮説: CSSは読み込まれているが、scopeを判別するための[data-hoge]が後から付けられている

@ishowta
Copy link
Contributor

ishowta commented May 28, 2022 •
edited
Loading

style.scssapp.hoge.cssだけ遅れてるかも？

@tamaina
Copy link
Contributor

tamaina commented May 28, 2022 •
edited
Loading

仮説: CSSは読み込まれているが、scopeを判別するための[data-hoge]が後から付けられている

css moduleもちゃんとFOUCになっているので違う気がする…？でもcss moduleも同じか？

style.scssだけ遅れてるかも？

style.scssというかapp.hoge.css？デッキやユニバーサルUIの骨組みだけは描画されたりしているので確かにそうかも…！

@tamaina tamaina mentioned this issue May 28, 2022
Merged
@Johann150 Johann150 mentioned this issue Jun 13, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🐛Bug Unexpected behavior packages/frontend Client side specific issue/PR 🐢Performance Efficiency related issue/PR
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(client): Fix FOUC by prefetching app.hoge.css tamaina/misskey
8 participants
@syuilo @ishowta @tamaina @acid-chicken @Johann150 @ThatOneCalculator @4ioskd @NovaAndrom3da