それを単純に保つ

フロントエンドのフレームワークはウェブの多くを取り上げました、しかし、質問は残っています-我々は本当にブラウザですべてのそのJavascriptを必要としますか?

シンプルに保つ

クライアント側のレンダリングは非常に強力なツールであり、いくつかのケースでは、ほぼ厳密にサーバーのレンダリングを解決することは不可能です問題を解決することができます.ウェブの大部分は非常に単純です-しかし、対話的なビットでほとんど静的な内容は中に散らばりました.
The Navillus 完璧な例です.それはSvelteの優れたを利用してモバイルメニューを持っていますbuilt-in transition , そして、我々は最近、ダークモードのトグルを追加しました.それは私たちのサイト上の相互作用のためですが、残りは完全に静的です.

ここに我々のホームページをロードしてdevtoolsのスクリーンショットです.すべてのHTML、CSS、JavaScript、イメージ、およびフォントを含む、～78 KBの壮大な合計.私は間違って取得しないでください、バンドルサイズを最小限に抑えるよりも、Webデザインや開発に多くのですが、パフォーマンスの問題と小さな勝利はすぐに追加することができます.

どのようなトリックですか？

我々のサイトを設計するとき、我々は当初からパフォーマンスを持ちました.我々は意図的に私たちのホームページに任意の画像を持っていないことに気づくかもしれませんが使用される唯一のアイコンは実際にはSVG sprites テクニックは、単一のファイル内のすべてのアイコンをロードします.

Just finished rebuilding https://t.co/UcT54hdIY5 with

Progressively enhanced with and clocking in at a whopping 12.5KB of total JS. Really digging how easy its becoming to build tiny sites these days

— Navillus ( )

先週現在、我々は公式に我々のサイトを交換しましたAstro . なぜ全く新しいプロジェクトの初期のベータと私たちのサイトを信頼するためにすべての努力を通過するか?まあ、なぜ!
我々は実際には、タイヤをキックし、プロジェクトに目を離さないと思って、私たちのサイトのアストロ版でライブに行くつもりはなかった.ビルドは驚くほど簡単だったが、結果は嘘をつかなかった.

十分な出荷

私たちのサイト上のJavaScriptの主なビットは、モバイルメニューです-私たちは、実際には最初のアストロプロジェクトを起動するときに、ダークテーマトグルを追加しました.我々はすでに我々の段階的に強化されたメニューについて掲示しました、しかし、キーは我々が簡単にJavascriptの有無にかかわらず働くためにsvelteを使いたかったです.JSロードならば、我々はSvelteslide 遷移をきれいにメニューをアニメーション化します.
Astroを使用すると、我々のサイトの98 %を構築することができますHTMLテンプレートとMarkdownより少しのJavaScriptの経験を改善するために追加します.いいえ、クライアント側のルーティングは、フロントエンドのフレームワークを動的にページをレンダリングするには、水和の問題やコンテンツのちらつき.
注意: Astroは、どのコンポーネントライブラリを好むかについては、議論されません.彼らはVue、反応、svelteで出荷し、ボックスからpreactとあなたがこれを読んで追加されている.

水和と言えば

アストロについての最も興味深いアイデアの一つはpartial hydration . デフォルトでは、コンポーネントのJavaScriptはブラウザでも読み込みません.それは必ずしも十分ではありません、そして、Astroはあなたにクライアントにそれをロードする方法のいくつかのオプションを与えます.

<Component:load />
<Component:idle />
<Component:visible />

それは本当に可能なだけ早く、すぐに利用できるようにする必要があるコンポーネントであると言う:load コンポーネントの上にあり、ページが読み込まれるとクライアントに読み込まれます.
コンポーネントは一般的ですが、すぐに必要としない:idle 代わりに、ブラウザが最初にページをロードし、コンポーネントをプルダウンする前にアイドル状態になって、初期ロードでパフォーマンスを向上させるのを待つように、アストロに伝えます.
ページの下にさらにコンポーネントをカバーしています.:visible を利用するIntersectionObserver API ユーザーがそれにスクロールする場合、コンポーネントを読み込むだけです.これは、カスタムJSの検証ロジックが必要なマーケティングページの下部にある連絡先フォームに有用かもしれませんが、すべての変換問題が発生したときにパフォーマンスのしゃっくりをリスクにしたくない.

すぐ近くにアストロに来る

<Component:media ="(min-width: 40em)"></Component:media>

これは、まだ開いている提案された機能だけですGithub そして、構文は非常に変化するかもしれません、しかし、ここの概念は巨大な勝利です.
再び私達のモバイルメニューを取る.私たちは:idle メニューを強化する前に、我々のページ全体をロードするのを許可するために、しかし、メニューが決して使われないデスクトップで.With :media または同様に、メニューのJSがモバイルビューポートにだけ読み込まれることを確認することができます.

ラッピング

目を離さないAstro , フォローGithub repo (または星を好む場合は)、そして自分のホームページにフィードバックを与えるために、アストロの将来のためのあなたのアイデアを共有するコミュニティの不調和をチェック!