更新：
Astro v4.4リリース！開発ツールバーやパフォーマンス改善をチェック
Astro
はコンテンツファーストの静的サイトジェネレーターです。その最新バージョンであるAstro 4.4がリリースされました。
このアップデートは、開発者の生産性向上とパフォーマンス改善に焦点を当てています。この記事では、Astro 4.4の主要なアップデートポイントを紹介します。
(window.powerTag.Init = window.powerTag.Init || []).push(function () {
window.powerAPITag.display("pw_41759");
}); 開発ツールバーのパフォーマンス監査機能
パフォーマンス監査はAstro 4.4の目玉機能の一つです。アクセシビリティ監査機能に続き、この新機能はWebサイトのパフォーマンス問題を特定し、解決策を提案するのに役立ちます。
たとえば、開発ツールバーは画面上部に配置された遅延読み込みの画像を警告し、より優れたパフォーマンスのためにイーガーロードを推奨します。
多くのWebサイトでは、最初の通信量を減らして高速化するために画像を遅れて読み込む「遅延読み込み」が使われています。しかし、最初に表示されるビューポート内の画像が遅延読み込みされると、パフォーマンスが悪化することが
知られています
。
Astro 4.4の開発ツールバーはこのような問題を特定し、修正するためのガイダンスを提供します。
監査リストUI
Astro 4.4から、開発ツールバーの監査アプリには、検出された問題の小さなUIが含まれるようになりました。このリストを使うと対処すべき問題が一目でわかり、問題のあるページ部分に素早く移動して修正できます。
今後、このUIはさらに改善され、各問題についての詳細情報や修正方法に関するガイダンスが提供される予定です。
ストリーミングパフォーマンスの改善
Astroは
Node.js
上でのReadableStreamsのパフォーマンスが想定以上に遅いことを発見し、AsyncIterableを使用するよう移行しました。この変更により、大きなサイドバーをもつ
Starlight
ベースのWebサイトのビルド時間が最大で47%短縮されるなど、顕著なパフォーマンス向上が見られました。
リモート画像の寸法を自動推測
Astro 4.4はリモートの画像の寸法を自動的に推測できるようになりました。新しいinferSize属性を使うことで、従来必須だったwidthとheightの属性を省略できます。
これはCMSや他の外部ソースからの画像を扱うときなど、ビルド時に画像の寸法が分からない場合にとくに便利です。
try{(()=>{function a(e){if(!e)return;let t=e.getAttribute("tabindex")!==null,n=e.scrollWidth>e.clientWidth;n&&!t?e.setAttribute("tabindex","0"):!n&&t&&e.removeAttribute("tabindex")}var u=window.requestIdleCallback||(e=>setTimeout(e,1)),i=window.cancelIdleCallback||clearTimeout;function l(e){let t=new Set,n,r;return new ResizeObserver(c=>{c.forEach(o=>t.add(o.target)),n&&clearTimeout(n),r&&i(r),n=setTimeout(()=>{r&&i(r),r=u(()=>{t.forEach(o=>e(o)),t.clear()})},250)})}function d(e,t){e.querySelectorAll?.(".expressive-code pre > code").forEach(n=>{let r=n.parentElement;r&&t.observe(r)})}var s=l(a);d(document,s);var b=new MutationObserver(e=>e.forEach(t=>t.addedNodes.forEach(n=>{d(n,s)})));b.observe(document.body,{childList:!0,subtree:!0});document.addEventListener("astro:page-load",()=>{d(document,s)});})();}catch(e){console.error("[EC] tabindex-js-module failed:",e)}try{(()=>{function i(o){let e=document.createElement("pre");Object.assign(e.style,{opacity:"0",pointerEvents:"none",position:"absolute",overflow:"hidden",left:"0",top:"0",width:"20px",height:"20px",webkitUserSelect:"auto",userSelect:"all"}),e.ariaHidden="true",e.textContent=o,document.body.appendChild(e);let a=document.createRange();a.selectNode(e);let n=getSelection();if(!n)return!1;n.removeAllRanges(),n.addRange(a);let r=!1;try{r=document.execCommand("copy")}finally{n.removeAllRanges(),document.body.removeChild(e)}return r}async function l(o){let e=o.currentTarget,a=e.dataset,n=!1,r=a.code.replace(/\u007f/g,`
`);try{await navigator.clipboard.writeText(r),n=!0}catch{n=i(r)}if(!n||e.parentNode?.querySelector(".feedback"))return;let t=document.createElement("div");t.classList.add("feedback"),t.append(a.copied),e.before(t),t.offsetWidth,requestAnimationFrame(()=>t?.classList.add("show"));let c=()=>!t||t.classList.remove("show"),d=()=>{!t||parseFloat(getComputedStyle(t).opacity)>0||(t.remove(),t=void 0)};setTimeout(c,1500),setTimeout(d,2500),e.addEventListener("blur",c),t.addEventListener("transitioncancel",d),t.addEventListener("transitionend",d)}function s(o){o.querySelectorAll?.(".expressive-code .copy button").forEach(e=>e.addEventListener("click",l))}s(document);var u=new MutationObserver(o=>o.forEach(e=>e.addedNodes.forEach(a=>{s(a)})));u.observe(document.body,{childList:!0,subtree:!0});document.addEventListener("astro:page-load",()=>{s(document)});})();}catch(e){console.error("[EC] copy-js-module failed:",e)}import { Image, Picture } from "astro:assets";
<Image src="https://example.com/image.jpg" alt="A cool image" inferSize />
<Picture src="https://example.com/image.jpg" alt="A cool image" inferSize />
ただし、この機能を使用するととくにSSRを使用している場合にパフォーマンスが悪化するとのことです。そのため、必要な場合にのみ使用することが推奨されています。
(window.powerTag.Init = window.powerTag.Init || []).push(function () {
window.powerAPITag.display("pw_41759");
}); この機能の詳細は
公式ドキュメント
を参照してください。
まとめ
次のいずれかのコマンドを実行すると、Astroをv4.4にアップデートできます。
pnpm upgrade astro --latest
yarn upgrade astro --latest
このリリースには多数のバグ修正も含まれています。詳細は
リリースノート
で確認できます。
参考
おすすめアイテム
※このリンクを経由して商品を購入すると、当サイトの運営者が報酬を得ることがあります。詳細はこちら。
-1.png&w=256&q=75)
生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。
Webフロントエンドプログラマーで、テクノロジーに関する話題を追いかけています。動画編集やプログラミングが趣味で、たまにデザインなどもやっています。主にTypeScriptを使用したWebフロントエンド開発を専門とし、便利で実用的なブラウザー拡張機能を作成しています。また、個人ブログを通じて、IT関連のニュースやハウツー、技術的なプログラミング情報を発信しています。
