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


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


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機能を慎重に使用します。

これらの組み合わせ戦略は、VUE.JSアプリケーションバンドルサイズの削減に大きく貢献し、負荷時間の改善とユーザーエクスペリエンスの向上につながります。