JSer.info #519 - Lighthouse 7.0.0がリリースされました。

Release v7.0.0 · GoogleChrome/lighthouse

Node.js 10のサポート終了、PWAカテゴリの変更、アクセシビリティのテストに使うaxe-coreのアップデート、nightlyをlighthouse@nextとしてインストールできるようになるといった変更が含まれています。
また、スクリーンショットがフルページとなりレポートのファイルサイズが増加しています。

ReactからReact Server Componentsと呼ばれる実験的な実装とRFCが公開されています。

React Server Componentsは、サーバサイドでReact Componentをレンダリングする仕組みですが、レンダリング結果はHTMLではなくJSONライクなデータ(SlotとコンポーネントのJSON表現を組み合わせた形式)です。

リクエストごとにサーバコンポーネントをレンダリングした結果をJSON(クライアント描画するコンポーネントを含む)のレスポンスとして返し、クライアントではそのレスポンス結果を使いレンダリングできる仕組みとなっています。
大まかにいえば、コンポーネントレベルでのSSRとHydrateを行える仕組みです。

サーバサイドでコンポーネントをレンダリングすることで、サーバでのレンダリング結果のみを扱うクライアントでは不要なライブラリを含めずに扱えます。
そのため、クライアントに必要なbundleサイズを減らせるのが主な目的となっています。
Facebookのproductionでテストした結果、bundleサイズが最大30%削減できているそうです。

詳しくは、次の動画とデモアプリで解説されています。

現在はまだRFCが出たばかりの実験的な段階であるため、来年にもっと詳細を決めていくようです。

Micro Frontends Architecture Patternsという電子書籍では、フロントエンドで見かけるアーキテクチャについて色々とまとめられています。
まだ決まりきったパターンがないMicro Frontendsについても色々なパターンについて紹介されています。

JSer.infoをサポートするには

😘 知り合いにJSer.infoをおすすめする
❤️ GitHub Sponsorsで@azuのスポンサーになる
🐦 X(Twitter)で@jser_infoをフォローする

JSer.info Sponsors

JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。

ヘッドライン

Release v7.0.0 · GoogleChrome/lighthouse

github.com/GoogleChrome/lighthouse/releases/tag/v7.0.0

Chrome performance Tools ReleaseNote

Lighthouse 7.0.0リリース。
Node.js 10のサポート終了。
PWAカテゴリの変更、アクセシビリティのテストに使うaxe-coreのアップデート、nightlyをlighthouse@nextとしてインストールできるようになる。
また、スクリーンショットがフルページとなりレポートのファイルサイズが増加するなど

Release v4.0.0 · less/less.js

github.com/less/less.js/releases/tag/v4.0.0

CSS ReleaseNote

Less 4.0.0リリース。
破壊的な変更としてmixinの呼び出し方のチェックをより厳密に変更、mathオプションの初期値をparens-divisionに変更など。
min()/max()のサポート改善、isdefined()の追加など

Announcing Stimulus 2.0 - Announcements - Stimulus Discourse

discourse.stimulusjs.org/t/announcing-stimulus-2-0/1482

JavaScript rails library ReleaseNote

Basecampで使われているStimulus 2.0リリース。
Controllerでvaluesとclassesプロパティを追加、EventListnerのonceとpassiveのサポートなど。
data属性にidentifierを含めて使うように変更、input要素をchangeからinputイベントで監視するように変更など

Release v2.0.0 · stimulusjs/stimulus

Release v6.0.0 · fb55/htmlparser2

github.com/fb55/htmlparser2/releases/tag/v6.0.0

HTML library ReleaseNote

htmlparser2 6.0.0リリース

Release v0.13.0 · developit/microbundle

github.com/developit/microbundle/releases/tag/v0.13.0

JavaScript library ReleaseNote Tools

ライブラリを配布用にbundleするmicrobundle 0.13.0リリース。
--cssフラグを追加し、CSSをデフォルトでは外部ファイル(external)として出力し、inlineでインライン化できるように。

アーティクル

Introducing Zero-Bundle-Size React Server Components – React Blog

reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html

React article

Reactで試験的に実装されたReact Server Componentsについて。
リクエストごとにサーバコンポーネントをレンダリングした結果をJSONライクなデータ(SlotとコンポーネントのJSON表現を組み合わせた形式)として返し、クライアントではレンダリング結果を使いレンダリングできる仕組み。
サーバサイドでコンポーネントをレンダリングすることで、レンダリング結果のみを扱うクライアントでは不要なライブラリを含めずに扱えるためサイズを減らせる。
コンポーネントレベルでのSSRとHydrateを行える仕組み。