vue.jsアプリケーションのバンドルサイズを減らすにはどうすればよいですか

###ツリーシェーキングでビルドステップを使用します

バンドルサイズを削減する最も効果的な方法の1つは、ツリーシャッキングをサポートする最新のビルドツールを使用することです。ツリーシェーキングは、最終的なバンドルから未使用のコードを排除するプロセスです。 VueのAPIと多くの最新のJavaScriptライブラリは、正しくバンドルされたときにツリーシェーキング可能になるように設計されています。たとえば、組み込みのような未使用のVueコンポーネントは、使用しないと生産ビルドに含まれません。ビルド時間中のテンプレート前のテンプレートは、Vueコンパイラをブラウザに出荷することも避けています。これにより、約14 kbの模倣およびGzipped JavaScriptを節約でき、ランタイムコストが削減されます。

###依存関係を管理および分析します

依存関係は、多くの場合、バンドルサイズに大きく貢献します。それは重要です：

-ESモジュール形式を提供し、ツリーを揺るがすフレンドリーである依存関係を選択します(例えば、「lodash」の代わりに「lodash-es」)。
- 「webpack-bundle-analyzer」などのツールを使用して依存関係を定期的に監査して、大型または不要なパッケージを識別します。
- 「depcheck」や「npm prune」などのツールを使用して未使用の依存関係を削除します。
- 大規模な依存関係をより小さく、より焦点を絞った代替品に置き換えます。たとえば、「echarts」のような重いチャートライブラリをchartist.jsのような小さなものに置き換えると、バンドルサイズを大幅に削減できます。

Lazyロードルートとコンポーネント

Lazy Loadingは、すべてを前払いする代わりに、必要なときにルートまたはコンポーネントのコードがロードされる戦略です。 Vue Routerは、コンポーネントを動的にインポートすることにより、怠zyなロードルートをサポートし、バンドルを初期負荷のパフォーマンスを向上させる小さなチャンクに分割します。このメソッドは、メインバンドルのサイズを大幅に削減し、ユーザーがアプリケーションをナビゲートするときに時間の経過とともにコードの負荷を広げます。

###コード分割と動的なインポートを使用します

VUEプロジェクトで一般的に使用されているWebpackは、動的 `Import()`ステートメントを介したコード分割をサポートしています。これは、アプリケーションの一部を非同期にロードされる個別のバンドルに分割できることを意味します。コード分​​割を適切に使用すると、必要なコードのみをオンデマンドで読み込むことで、バンドルサイズの管理に役立ちます。

###ミニフィッシュと圧縮

MINIFICITIONにより、Whitespace、コメント、および変数名の短縮を削除することにより、JavaScriptファイルのサイズが削減されます。 UglifyJSやTerserなどのツール(多くの場合、最新のビルドプロセスに統合されています)は、生産ビルドステップ中にコードを自動的に削除します。さらに、GzippingまたはBrotli圧縮により、ユーザーに提供される資産のサイズがさらに減少します。

###特定のユースケースに小さなVUEの代替品を使用します

完全なVUE.JSフレームワークが重すぎる可能性があるプロジェクトの場合、特にプログレッシブエンハンスメントの場合は、サイズが約6 kbしかないPetite Vueなどの軽い代替品を使用することを検討してください。これは、プロジェクトが完全なVUEエコシステムを必要としない場合に役立ちます。

scope and Importは、ライブラリの必要な部分のみです

Bootstrap VueやLodashなどの多くの大きなライブラリは、ライブラリ全体ではなく特定のコンポーネントまたは機能のみをインポートすることができます。たとえば、Bootstrap Vueライブラリ全体をインポートする代わりに、必要なコンポーネントのみをインポートするため、未使用部品を除外することでバンドルサイズが削減されます。同様に、Import lodashはモジュラーに機能します(lodash全体の代わりに「lodash/map」からの「インポートマップ」)。

###必要でない場合はインラインスタイルや大規模なCSSフレームワークを避けてください

BootstrapなどのCSSフレームワークは、バンドルサイズに追加されます。フレームワーク全体が本当に必要かどうかを評価し、より柔軟でより小さなCSSバンドルのために、Tailwind CSSのような代替案を検討します。また、可能であれば、未使用のスタイルのインポートを削除したり、CSSを外部からホスティングすることを検討してください。

###サーバー側のレンダリングと静的サイト生成

SSR(サーバー側のレンダリング)またはSSG(静的サイト生成)を介してサーバーにレンダリングを移動すると、クライアント側に必要なJavaScriptの量が減り、バンドルサイズを効果的に低下させます。これにより、レンダリングの責任がサーバーにシフトし、インタラクティブ性のために最小限のJSで事前に構築されたHTMLをクライアントに送信します。

###画像やその他の資産を最適化します

これはJavaScriptのバンドルサイズに直接影響するわけではありませんが、画像、フォント、およびアセットの最適化は、JavaScriptの改善を補完する全体的なページロードパフォーマンスに貢献します。

###現代のJavaScript機能とポリフィルを賢く使用します

最新のJavaScript構文を使用すると、最新のビルドツールと組み合わせると、バンドルが小さくなります。古いブラウザをターゲットにしない限り、不必要なポリフィルを避け、ユーザーブラウザー機能に基づいて条件付きポリフィルを検討してください。

vue.jsバンドルサイズを減らすための慣行の概要

- ツリーシェーキングを備えたビルドツール(Webpack、Viteなど)を使用します。
- プリコンパイルVUEテンプレート。
- 「webpack-bundle-analyzer」などのツールでバンドルの内容を分析します。
- 重い依存関係を削除または交換します。
- 必要なコンポーネントまたは機能をライブラリからのみインポートします。
- ルートとコンポーネントの怠zyな読み込みを実装します。
- コード分割と動的なインポートを使用します。
- マイニフィスと圧縮を適用します。
- 特定のアプリケーションの小柄なvueのような小さな代替品を検討してください。
- CSSの使用を最適化し、フレームワーク全体を不必要にインポートしないようにします。
-SSRまたはSSGを使用して、クライアント側のバンドルサイズを縮小します。
- 資産を最適化し、最新のJavaScript機能を慎重に使用します。