ビルドプロセスの最適化
最適化された本番ビルドを作成します。
「ビルドプロセスの最適化」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全3レッスンが含まれています。
開発環境から本番環境へ
開発中は、ホットリロード対応の開発サーバーを実行します。公開するには、速度とサイズを最適化した静的ファイル一式である本番ビルドを作成します。これは、どのホストにもデプロイできる状態になっています。
ビルドの実行
標準のコマンドで、アプリを本番用にビルドします。Vite（Vue 3の標準ツールチェーン）がすべてをコンパイルし、バンドルして最適化します。
npm run buildビルドの出力
ビルドによって最適化されたファイルがdistフォルダーに書き込まれます。そこにはindex.html、ハッシュ付きのJavaScriptおよびCSSバンドル、静的アセットが含まれます。このフォルダーをデプロイします。
dist/
index.html
assets/
index-a1b2c3.js
index-d4e5f6.cssミニファイ
ミニファイでは、空白やコメントを削除し、変数名を短くして、ファイルをより速くダウンロードできるようにします。本番ビルドでは、JavaScriptとCSSが自動的にミニファイされます。
ツリーシェイキング
ツリーシェイキングでは、使用していないコードを削除します。ライブラリから1つの関数だけをインポートすると、バンドラーが残りのコードを削除します。ツリーシェイキングを機能させるには、ESモジュールの名前付きインポートを使用します。
// only what you use is bundled
import { debounce } from "lodash-es"コンテンツハッシュ
ビルドの出力ファイル名には、index-a1b2c3.jsのようなコンテンツハッシュが含まれます。コードが変更されるとハッシュも変わるため、ブラウザーは新しいファイルを取得し、変更されていないファイルは積極的にキャッシュできます。
バンドルサイズの分析
バンドルの内容を確認するには、可視化プラグインを使用します。最も多くの容量を占めているモジュールを示すインタラクティブなグラフが生成され、最適化の指針になります。
npm install -D rollup-plugin-visualizer分析結果の読み方
ほとんど使用していない大きな依存関係は危険信号です。分析によって、より小さな代替ライブラリに置き換えたり、遅延読み込みしたりできる、サイズの大きい日付処理またはグラフ作成ライブラリが見つかることがあります。
環境変数
Viteは、VITE_を接頭辞とする環境変数をimport.meta.envを通じて公開します。これらを使って、環境ごとにAPI URLや機能フラグを設定します。
// .env.production
// VITE_API_URL=https://api.example.com
const apiUrl = import.meta.env.VITE_API_URL環境別ビルド
Viteは、npm run buildの実行時に.env.productionを、npm run devの実行時に.env.developmentを読み込みます。そのため、各環境に適した設定が自動的に適用されます。
// .env.development -> VITE_API_URL=http://localhost:3000
// .env.production -> VITE_API_URL=https://api.example.comビルドのプレビュー
デプロイする前に、本番ビルドをローカルでプレビューし、実際の最適化済みファイルで期待どおりに動作することを確認します。
npm run build
npm run preview確認問題
ビルドプロセスに関する知識を確認します。
まとめ
npm run buildを実行すると、ミニファイ、ツリーシェイキング、コンテンツハッシュが適用されたアセットを含む、最適化済みのdistフォルダーが生成されます。バンドルサイズを分析してサイズの大きい依存関係を減らし、.envファイルとVITE_環境変数を使って環境ごとの設定を行います。公開する前にプレビューします。次は、このビルドをホスティングプラットフォームにデプロイします。
よくある質問
「ビルドプロセスの最適化」レッスンは無料ですか？
はい。「ビルドプロセスの最適化」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全3レッスンが含まれています。
「ビルドプロセスの最適化」で何を学びますか？
最適化された本番ビルドを作成します。 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。
「ビルドプロセスの最適化」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ビルドプロセスの最適化
- ホスティングプラットフォームへのデプロイ
- モニタリングとメンテナンス