Chrome はより快適なウェブの実現に向けてオープンソース フレームワークと協力
Chrome はウェブ フレームワークのエコシステムに積極的に貢献しており、Chrome Dev Summit での講演も行っています。 2019 年は、この 1 年間に取り組んできたことを振り返ります。
講演のまとめと、追加の詳細やリソースをご紹介します。
ウェブを改善するにはどうしたらいいか？
Chrome チームの全員の目標は、ウェブをより良いものにすることです。Google はブラウザ API の改善に取り組んでいます Chrome の基盤となる JavaScript と WebAssembly の エンジンである V8 が 優れたウェブページの構築に役立つ機能を搭載しています。また、Google は、 オープンソース ツールに貢献することで、すでに本番環境に導入されています。
ほとんどのウェブ デベロッパー 可能な限りオープンソース ツールに依存しており、完全にカスタマイズされた 説明します。クライアントサイドの JavaScript フレームワークと UI ライブラリが、 オープンソースでの利用ですよく使用される 3 つのクライアントサイドのフレームワークとライブラリに関するデータ React、Angular、Vue は、 必要があります。
- 会議の参加者の 72% は、 MDN の 1 年目のウェブ デベロッパー兼デザイナー向けアンケート 少なくとも 1 つのフレームワークとライブラリを使用していること。
- 約 32 万サイト HTTP Archive で分析された上位 500 万件の URL は、これらのフレームワークとライブラリの少なくとも 1 つを使用しています。
- 所要時間でグループ化すると、上位 100 件の URL のうち 30 件が、これらのフレームワークの 1 つ以上を使用している 使用できます。（調査は内部データで実施しました）。
すなわち、優れたオープンソース ツールがより良いウェブの実現に直接つながるのはそのためです。 Chrome のエンジニアは、外部のフレームワークやライブラリの作成者と直接連携し始めました。
ウェブ フレームワークへの貢献
ウェブページの構築と構造化に一般的に使用されるフレームワークは、次の 2 つのカテゴリに分類されます。
- 制御を提供する Preact、React、Vue などの UI フレームワーク（またはライブラリ） （コンポーネント モデルなどを介して）アプリのビューレイヤに表示できます。
- エンドツーエンドのシステムを提供する Next.js、Nuxt.js、Gatsby などのウェブ フレームワーク 独自の機能（サーバーサイド レンダリングなど）が組み込まれています。これらのフレームワークは ビューレイヤに UI フレームワークまたはライブラリを利用する。
デベロッパーはフレームワークを使用せず、ビューレイヤ ライブラリ、ルーター、 サーバー レンダラなどを利用しますが、多くの場合、独自の 説明します。独自のものですが、ウェブ フレームワークはこれらの問題の多くにデフォルトで対処します。
この投稿の残りの部分では、さまざまなフレームワークで最近達成された多くの改善点を取り上げます。 Chrome チームの貢献を含む
Angular
Angular チームは、フレームワークのバージョン 8 に多くの改善を加えました。
- 差分読み込み 新しいブラウザでは、不要なポリフィルが最小限に抑えられます。
- ルートの遅延読み込みの標準の動的インポート構文をサポートします。
- メインスレッドとは別のバックグラウンド スレッドでオペレーションを実行するためのウェブ ワーカーのサポート。
- Ivy（Angular の新しい レンダリング エンジンにより、再コンパイルのパフォーマンスが向上し、バンドルが削減されます。 プレビュー モードで利用可能な 共有することもできます。
これらの改善点について詳しくは、 「Angular のバージョン 8」 Chrome チームは来年、皆様と緊密に連携し、 できます。
Next.js
Next.js は、React をビューレイヤとして使用するウェブ フレームワークです。Kubernetes の 多くのデベロッパーがクライアントサイドのフレームワークに期待する UI コンポーネント モデルですが、Next.js では、 組み込みのデフォルト機能の数:
- デフォルトのコード分割によるルーティング
- コンパイルとバンドル（Babel と webpack など）
- サーバーサイド レンダリング
- ページ単位でデータを取得するメカニズム
- カプセル化されたスタイル設定（styled-jsx）
Next.js はバンドルサイズの縮小に向けて最適化されており、Chrome チームは改善の余地がある領域の特定を支援してくれました パフォーマンスをさらに高めることができます各リクエストの詳細については、それぞれのリクエストをご覧ください。 コメント（RFC）と pull リクエスト（PR）の場合:
- よりきめ細かなバンドルを出力する改善された Webpack のチャンク戦略により、 複数のルートで取得された重複コードの量 （RFC、 PR）。
- 差分読み込み module/nomodule パターン コードなしで、Next.js アプリでの JavaScript の総量を最大 20% 削減できます （RFC、 PR）。
- User Timing API を利用したパフォーマンス指標のトラッキングを改善 （PR）。
骨董品や収集品を扱う大規模検索エンジンの また、Android Studio を使用して、ユーザーとデベロッパーの双方の体験を Next.js:
- 同時モードを有効にして、コンポーネントのプログレッシブまたは部分的なハイドレーションのロックを解除します。
- すべてのソースファイルと生成されたアセットを分析して、 より適切なエラーと警告（RFC）を明らかにする。
Nuxt.js
Nuxt.js は、Vue.js とさまざまなライブラリを組み合わせて 独自の設定を提供しますNext.js と同様に、すぐに使える多くの機能が含まれています。
- デフォルトのコード分割によるルーティング
- コンパイルとバンドル（Babel と webpack など）
- サーバーサイド レンダリング
- すべてのページの非同期データ取得
- デフォルトのデータストア（Vuex）
さまざまなツールのパフォーマンス向上に直接取り組むと同時に、 フレームワーク ファンドを利用して、より多くのオープンソースを金銭的に支援 ライブラリです。最近の Nuxt.js へのサポートに加え、 よりスマートなサーバー レンダリングや画像認識などの機能も近日中に提供される予定です。 役立ちます
Babel
また、ほぼすべてのケースで、基盤となる重要なツールのパフォーマンスを改善する取り組みも進んでいます。 Babel などのフレームワークを使用します。
Babel は新しい構文を含むコードを、さまざまなブラウザが理解できるコードにコンパイルします。
@babel/preset-env を使用してターゲットを設定する
さまざまなブラウザ ターゲットを指定して十分なポリフィルを提供できる最新のブラウザ
必要があります。ターゲットを指定する 1 つの方法は、<script
type="module"> を使用して、ES をサポートするすべてのブラウザをターゲットにすることです。
モジュールをご覧ください。
この状況に合わせて最適化するために、プリセットを新たにリリースしました。
@babel/preset-modules最新の構文を変換する代わりに、
を古い構文に修正し、ブラウザのバグを回避します。preset-modules は、
最新の構文であり、破損していないかこれにより、ほぼリアルタイムでデプロイ可能な
ほとんどのブラウザに適用されます。
すでに preset-env を使用しているデベロッパーも、これらの最適化の恩恵を受けることができます。
何でもできます。これらはまもなく preset-env に組み込まれる予定です。
次のステップ
オープンソースのフレームワークやライブラリと緊密に連携して優れたエクスペリエンスを提供することで、 Chrome チームは、ユーザーとデベロッパーの双方にとって根本的に何が重要かを理解しています。
ウェブ フレームワーク、UI ライブラリ、任意の形式のウェブツール（バンドラ、コンパイラ、リンター）で作業している場合、 フレームワーク ファンドにお申し込みください。