refactor: use Vite to build instead of webpack

[tamaina]

Resolve #6845
Resolve #8525
Close #6901

Requires #7667 (because changes of Service Worker build sequense is conflicted)

What

クライアントのビルドツールをWebpackからViteにします。

Why

• ビルドの軽量・高速化
• 開発者ツールがメモリを使いまくるのを解消

Additional info (optional)

See also tamaina#67

• Firefox, ChromiumにおいてFOUCが発生する。iOS Safariでは発生しない。ViteのDiscordで質問してみたけど反応がなかった。根拠はないがユーザーの半分はSafariでアクセスしている気がするので、とりあえず直さなくても大丈夫だと私は思った。
  なお、cssCodeSplit: falseにするとプロジェクトすべてのCSSを統合した260KiB余りのcssが生成される。
• chartjs-plugin-gradient がなぜかmain指定がアカンと言われる。node-resolveとかcommonjsのプラグインを試してみてもダメ。 https://github.com/tamaina/misskey/blob/73d138d8b0260e048365482dff85d4e833e14f89/packages/client/src/components/chart.vue#L32
• requireを使うのが面倒そうだったのでimportを使うようにした

[syuilo]

popup側でdefineAsyncComponentするのはダメかしら

[tamaina]

popup側でdefineAsyncComponentするのはダメかしら

ダメっぽい
(rollupあたりのバグを引く)

[syuilo]

packages/backend/src/server/web/views/base.pug でprodとdevで処理を分けてるのは何でかしら

[tamaina]

prodとdevで処理を分けてる

prodでconst clientEntry = JSON.parse(readFileSync(${_dirname}/../../../../../built/client_dist/manifest.json, 'utf-8'))['src/init.ts'].file.replace(/^_client_dist_\//, ''); を発動させたくないから
（devでは最新のclientEntryを使いたいのでこのような面倒なことをしている）

[syuilo]

あんまりbase.pugにロジックっぽいものを置きたくない感じはする

[syuilo]

init.tsのrootElに改修が入った理由がよくわからなかった

[tamaina]

init.tsのrootElに改修が入った理由

tamaina#67 (comment)
tamaina#67 (comment)

[syuilo]

ほむ
できればimportが2回実行される問題をどうにかしたいわね(どうにかできなかったからこうしてるのだろうけど)

とりあえずimportが2回実行されることがあるからこうしているというのをコメントで残しておくと良さそう

[syuilo]

あとimportが複数回実行されると、仮に複数回マウントされるのをこのように対処したとしても他の箇所で不具合起きそうと思ったけどそうでもないのかしら

[tamaina]

あとimportが複数回実行されると、仮に複数回マウントされるのをこのように対処したとしても他の箇所で不具合起きそう

私が使っている範囲では、mountするdivを1つにしてからは不具合は起きていない

[tamaina]

コメント追加した

[syuilo]

YOSASOU

[tamaina]

chartjs-plugin-gradientどうする

[syuilo]

チャートにグラデーションが使えなくなるデメリットよりもその他諸々のメリットが勝っているからとりあえず無効で良い

[tamaina]

一応コメントに書いた

[syuilo]

🚀 👍🏻👍🏻👍🏻 🚀