宇宙飛行士の経験
「ここで我々は行きます、もう一つのフレームワークは外にあります、そして、もう一人の男はそれについてウェブサイトとブログを作っています」
我々がこれをおもしろくすることができるかどうか見ましょう.😉
何がAstroですか？
あなたが既に知っているならばAstro , あなたはskip to the next chapter .
Astro is a Static Site Generator (SSG). Build your pages in
.astrofiles (very close to HTML/JSX) and sparkle them with React/Vue/Preact/Svelte components. It deals with file-based routing and templates neutrally. Bring your component framework. In my words
それ以上にある.参照Astro's introduction blog post .
時間があれば90min video and Transcript それについて.
アストロを選んだ理由
Not because it's the new/latest shiny framework 😀
私は4月に初めて見た時、私の考えを共有したAstro .
ジョージズ
今朝見たことがある.チームからの「メタWebフレームワーク」の到来😅)何か重要なことを見せていると思う.ここに私の謙虚なテイクと新興メタフレームワーク(1/11)です
午前8時36分
新しい時代を開拓する時divRIOTS.com ウェブサイトは、我々は最高のオプションを探しました.
要件は以下の通りでした.
シンプル-それは大規模なサイトになるつもりはない.
JavaScriptを実行します-生態系はよく知っている.
100 %の静的HTMLを生成します-良いパフォーマンス、良いSEO.
ファイルベースのルーティング-非常に便利
コンポーネント駆動型の開発を許可する
ブログ投稿のための
しかし、それを信じているかどうか、我々の要件に一致する多くのオプションがありません.
ほとんどのコンポーネント駆動オプションはいくつかの比較的重いJavaScript
ペイロードhydration , コンテンツが100 %静的であっても.
一方で、本当にJavascript以下のSSGはテンプレートエンジンを使用しますNunjucks or Liquid . 彼らは驚くべき選択肢ですが、それは別の言語と別のパラダイムです.コンポーネント駆動されません.
We just wanted a good Static Site Generator with a JavaScript Developper Experience and 100% HTML output by default. And Astro is precisely that.
純粋な宇宙飛行士
divRIOTS.com は100 %に組み込まれていますAstro .
なしReact , なしVue , なしSvelte , どれもpartial hydration or islands 能力Astro .
ジャスト
.astro ファイル.You don't need to use the cutting-edge hydration capabilities of Astro to already benefit from it.
Astro エレガントなコンポーネントモデルとスコープCSS、CSSモジュール、およびSASSのサポートと固体CSSのパイプラインが付属しています.
アウトボックス.
過小評価
Astro's CSS Bundling is probably its most underrated feature. It never makes it to the headline but it's by far my favorite!
インAstro , あなただけのレイアウト
<style> あなたがそれらを必要とし、あなたのリストのリストを追加する<link ref="stylesheet"> あなたの<head> .例えば、divRIOTS.com グローバルなCSS
<head> 最も慣用的な方法で.<link href="/css/reset.css" rel="stylesheet" />
<link href="/css/global.css" rel="stylesheet" />
.css ファイルをミニ化し、それらを個別に呼び出すと、最高のパフォーマンス結果を提供しません.しかし、生産のために造られるとき
astro build , <style> タグと<link ref="stylesheet"> が微調整され、自動的にバンドルされます./_astro/[page]-[hash].css ) \_astro/common-[hash].css ) <link href="/_astro/common-[hash].css" rel="stylesheet" />
<link href="/_astro/mypage-[hash].css" rel="stylesheet" />
/_astro/common-[hash].css すべてのページで同じです.それはキャッシュされていないサイト上のナビゲーション中に再ダウンロードされません.より良い結果を得るのは難しい.これは、読みやすさとメンテナンスのために意味を作る方法を書くことができます
astro build 最高のパフォーマンスの世話をする.I don't know any static site generator capable of doing [pure] CSS Bundling and minification so seamlessly.
詳細はAstro's Styling Guide #bundling .
性能結果
出力は100 %最適化されたHTML/CSSです.ゆっくりするのは難しい😀
何が行方不明ですか
私の謙虚な意見ではなく、多くの.divRIOTS.com それの証拠です.
しかし、ここに私のウィッシュリストがあります.
JavaScript処理
ライクAstro 's CSSバンドルです
<script> タグを蒸散、バンドルされ、チャンク、最高の方法でminified.node_modulescommon-chunk.jsGitHub issue #370
画像処理
JavaScriptのように、イメージの最適化は、静的なサイトジェネレータのトップを追加する別のかなり複雑なビルドプロセスです.ボックスをサポートして最小限の労力で最大のパフォーマンスを得るのを助ける.
GitHub Issue #492
特定のページの" Permalink "
今日のすべてのページは
/slug/index.html , しかし、いくつかのページは/slug.html 代わりに.ライク/404.html .GitHub Issue #465
閉鎖思考
Astro is more than a SSG
後述するように、別の魅力的な機能Astro 彼の中立はフレームワークだ.
Astro ルーティング、レイアウト、データ管理、およびSSRインフラストラクチャを管理し、他のフレームワークから現在のコンポーネントをReact , Vue3 , Preact , and Svelte ) しかし、必要に応じて出力にJavaScriptのランタイムをゼロにします.
コンポーネントのフレームワークが来て、行くように、それはあなたのサイトを最後に長くします.つのフレームワークから別のフレームワークに移行する必要はありません.あなたが望む限り、それらを使用します.
私はAstro 「不可知論的メタフレームワーク」.そして、私はそれがレンダリングライブラリからメタフレームワークを分離するために多くの感覚を作るので、他の解決がこのスペースに現れるのを見ると思います.
もう一つのAstroウェブサイトは、来ています
Backlight.dev , 当社の今後の製品を構築し、コード側に設計システムを管理する、すぐに明らかにされます.
完全着陸も2009年に行われますAstro しかし、全く新しいレベルにそれを取る🚀
Stay tuned!
Reference
この問題について(宇宙飛行士の経験), 我々は、より多くの情報をここで見つけました https://dev.to/divriots/our-experience-with-astro-1hk8テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol