Webpack

最新のウェブ アプリケーションのバンドル

Addy Osmani
Addy Osmani
X GitHub

最新のウェブ アプリケーションでは、多くの場合、バンドル ツールを使用して、最適化と圧縮を行い、ユーザーが短時間でダウンロードできるファイル（スクリプト、スタイルシートなど）の本番環境用の「バンドル」を作成します。webpack によるウェブ パフォーマンスの最適化では、webpack を使用してサイトリソースを効果的に最適化する方法について説明します。これにより、ユーザーがサイトをよりすばやく読み込んで操作できるようになります。

Webpack のロゴ。

webpack は、現在使用されている最も人気のあるバンドルツールの 1 つです。最新のコードを最適化する機能を利用して、スクリプトを重要な部分と重要でない部分にコード分割し、未使用のコードを取り除くことで、ネットワーク コストと処理コストを最小限に抑えることができます。

JavaScript 最適化を適用する前と適用後操作可能になるまでの時間が改善されました  

Susie Lu による Bundle Buddy のコード分割から着想

まず、最新のアプリで最も費用のかかるリソースの一つである JavaScript の最適化から見ていきましょう。