Clever Geek Handbook

webpackから（）をインポートすると、すぐにJS + CSSが学習されますが、ここで使用方法を説明します

画像



1か月半前、webpackの作成者Tobias Koppersは、記事「 CSSの新しいワークフロー（step1） 」でWebpackのCSSの「Big Plan」をリリースしました。



描画できる最初の結論は、CSSコードの分離が最優先事項になるということです。 動的コードスニペットごとに生成されたcssファイルを取得できます。import import()



呼び出しは、JS + CSSの2つのファイルを返します。



これは記事からの引用です：



大きな計画



長期的には、「ファーストクラス」のCSSサポートモジュールをwebpackに追加します。 次のように機能します。



  • 新しいタイプのモジュールをwebpackに追加しています：スタイルシート（Javascriptの隣）
  • 2つのファイルを記録するためのフラグメントテンプレートを設定します。 1つはJavaScript用で、もう1つはスタイルシート（.cssファイル内）用です。
  • スタイルシートをロードできるように、ブロックロードロジックをカスタマイズします。 JSを実行する前に、CSSが使用されるのを待つか、少なくともロードする必要があります。
  • コードフラグメントの読み込みを生成すると、js部分とスタイルシート部分を同時に（Promise.allと組み合わせて）読み込むことができます


基礎は、もちろん、各動的フラグメントのCSSファイルを作成する機能です。 現在、 extract-text-webpack-plugin



モジュールはこれを行いません。 現在利用可能なベータバージョン3.0は、この機能をサポートしていません。 もちろん、私のextract-css-chunks-webpack-plugin



がありextract-css-chunks-webpack-plugin



。これはしばらくアクティブに使用されていextract-css-chunks-webpack-plugin



、十分ではありません。 コンパイルが遅く、ブラウザのキャッシュが増加しないため、十分ではありません。 その理由は、2つの異なるJSを作成するため、アイデア全体が分割不可能な全体に基づいている必要があるためです。 これらのフラグメント：





これが発生する理由は、最初のレンダリングがキャッシュされたスタイルシートの最小バイトセットと同じ最小セットを受け取るためです。 したがって、それ以降のimport()



すべての呼び出しでimport()



cssが欠落しています。



背景



これをすべて理解するために、これについて初めて聞いた場合、次の記事に興味があるでしょう： Reactlandiaのコード分割+ SSRのコードクラック：React Universal Component + Webpack Flush Chunksなど



上記の記事で書かれた内容を要約すると、次のコンポーネントがありますwebpack-flush-chunks



react-universal-component



およびwebpack-flush-chunks



。これにより、コードの分割と同時にアプリケーションを簡単かつ普遍的にレンダリングできます。 パブリックNPMパッケージとして初めて（フレームワークは不要）。 サーバー側レンダリング（SSR）は解決済みの問題であり、コード分離は解決済みの問題ですが、それまでは両方を一度に使用することは未解決の問題でした。



コード分​​離のためにSEO / SSRを犠牲にする必要はありません。



また、クライアントに送信されたバイトを保存する主なメカニズムはコード分離であることも意味します。 また、アプリケーションを最小限に最適化することを決定した場合、プライベートメンバーのCSSコードをすべてのパブリックビジターに送信したり、その逆をしたりすることは望ましくありません。 もちろん、アプリケーションにいくつかの領域がある場合、これらは単に通信の問題です。



実際、静的に共有されたCSSを使用すると、一般的なレンダリングパスデュジュールソリューションよりも少ないバイトをクライアントに送信します（CSS定義をJSフラグメントと追加のCSSの両方に送信する必要があるため）。 さらに重要なことは、サーバー側とクライアント側でのレンダリング中にCSSを生成する時間のかかるループを大幅に節約できることです。



クライアントに送信する静的CSSファイルを制御できるのは、この問題に対処するための本当に良い方法だからです。



Babel-Plugin-Dual-Importの概要+ Extract CSS Chunks Webpack Plugin 2.0



babel-plugin-dual-import



リクエストをPromise.allに変換し、ボーナスとしてwebpackChunkNameを自動的に提供します。 「魔法のコメント」はとても不思議で、消えてしまいます！ もちろん、私はそれらを使用して、コードスニペットの名前を生成します。



extract-css-chunks-webpack-plugin 2.0



に関しては、ビルド時間（2つ以下のJSフラグメント）の観点から深刻なパフォーマンスの問題を回避しました。現在、ユーザーのブラウザーが持っているスタイルシートのみを扱っていますキャッシュできます。 そして、はい、Quick Module Exchange（HMR）はまだ機能します（これまでよりも優れています）。



また、これら4つのパッケージはすべてシームレスに連携します。 これをarbitrarily意的に「ユニバーサル」パッケージファミリと呼びます。 もちろん、これらはすべて柔軟なフレームワーク開発の目的であるため、個別に使用できます。 しかし、当然、それらは一緒に最適に機能します。 お楽しみください。



設置



主にbabelプラグインを実装しているため、それに焦点を当てます。 



 yarn add --dev babel-plugin-dual-import


.babelrc： 



 { "presets": [whatever you usually have], "plugins": ["dual-import"] }


App.js： 



 import('./Foo.js') ↓ ↓ ↓ ↓ ↓ ↓ import { importCss } from 'babel-plugin-dual-import/importCss.js' Promise.all ( [ import( /* webpackChunkName: 'Foo' */ './Foo'), importCss('Foo') ] ).then(promises => promises[0]);


そして、これらすべてを動的に使用する場合、以下を追加する必要があります。 



 import('../base/${page}') ↓ ↓ ↓ ↓ ↓ ↓ import { importCss } from 'babel-plugin-dual-import/importCss.js' Promise.all([ import( /* webpackChunkName: 'base/[request]' */ `./base/${page}`), importCss(`base/${page}`)] ).then(promises => promises[0]);


webpack-flush-chunks



にwebpack-flush-chunks



どのようにwebpack-flush-chunks



するかを見たことがある場合、新しい追加はcssHashで、これはwebpackがブートストラップスクリプトに置くものに似ており、javascriptフラグメントを識別子と照合します。 cssHashは、cssフラグメントの名前をスタイルファイルに転送します。 Babel-plugin-dynamic-importは、javascriptのインポートと並行して、そこからスタイルシートを要求します。



おわりに



git cloneデモは、これからの4つのパッケージすべてで機能するため、言うことはあまりありません。



React Universal Component + Webpack Flush Chunksに完全に慣れていない場合は、少なくとも説明を斜めに表示することをお勧めします。 これは現在、フレームワークの数が多すぎることを恐れるReact開発者にとって、これらすべてをまとめる唯一のソリューションです。 似たような問題を抱えた開発者にとっては、あの頃は終わりました。





この記事は関連性が高いだけでなく、これら4つのパッケージを使用する技術に精通している人でもこの記事が役立つことを願っています。 habrが著者の言及する記事の翻訳が必要かどうかの訂正、欠点の指摘、および/または情報に感謝します。



参照：





More articles:


All Articles