JavaScriptのバンドルサイズを70%削減する方法
ほとんどのWebアプリケーションは、過剰なコードを配信しています。平均的なWebページでは1.7 MBのJavaScriptが読み込まれていますが、開発者がデプロイしたコードのうち、実際に使用されているのはわずか約35%に過ぎません。
バンドルサイズを小さくすることで、Core Web Vitalsが改善されます。Largest Contentful Paint (LCP) や Time to Interactive (TTI) のスコアが向上し、より高速になります。
バンドルサイズを縮小するための10のステップは以下の通りです：
- Tree shaking: 未使用のコードを削除します。これを機能させるには、ES Module構文を使用してください。
- Code splitting: コードをより小さな断片に分割します。
- Dynamic imports: ユーザーが必要としたときにのみコードを読み込みます。
- Image optimization: 重いライブラリの代わりに、URLベースの変換を使用します。
- Dependency auditing: 重いライブラリを軽量なものに置き換えます。
- Minification: コードファイルを圧縮します。
- Compression: Gzipよりも優れた結果を得るためにBrotliを使用します。
- Dead code elimination: 到達不能なコードの分岐を削除します。
- Lazy loading: 非クリティカルなコンポーネントの読み込みを遅らせます。
- Polyfill pruning: ユーザーが必要とするポリフィルのみを配信します。
3つの手法を組み合わせるのが最も効果的です。Lazy loading、polyfill pruning、dead code eliminationを組み合わせることで、サイズを15〜30%削減できます。
依存関係をインストールする前に監査を行いましょう。サイズを確認するには npx bundle-phobia を使用してください。
例：
• date-fns (13KB) は moment.js (67KB) よりも優れています。
• dayjs (2KB) は日付フォーマットの優れた代替手段です。
• フル版の lodash ライブラリの代わりに lodash-es を使用してください。
以下の目標値で進捗を確認してください： • 合計JSサイズ: 120 KB未満を目指します。 • LCP: 2.5秒未満を目指します。 • TTI: 3.5秒未満を目指します。
次のような間違いを避けましょう： • プロダクションビルドではなく、開発用ビルドをデプロイしてしまう。 • 1つの関数しか必要ないのに、ライブラリ全体をインポートしてしまう。 • サーバーでBrotli圧縮を有効にするのを忘れる。
Tree shaking、code splitting、dependency auditingを活用すれば、1スプリントでペイロードを50〜70%削減できます。
出典: https://dev.to/kui_luo/how-to-reduce-your-javascript-bundle-size-by-70-in-10-steps-3j1g