ビルドとプレビュー
vite build と vite preview を実行して、本番用ビルドをローカルで確認します。
「ビルドとプレビュー」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。
ビルドコマンド
ビルドスクリプトを実行して、本番環境用の出力を生成します。
npm run buildビルドで行われること
Viteがコードをバンドル、ツリーシェイキング、ミニファイします。SvelteKitは選択したアダプターを適用します。
ローカルでプレビューする
プレビュースクリプトを使って、本番ビルドをローカルでテストします。
npm run previewプレビューを行う理由
プレビューは開発環境よりも本番環境に近いものです。HMR用に計測されたコードではなく、ビルド済みのバンドルを配信します。
ビルド出力
デフォルトの出力先はbuild/です。構成は各アダプターによってカスタマイズされます。
ビルドエラー
TypeScriptのエラーやインポートの問題はここで明らかになります。デプロイ前に修正してください。
パフォーマンス監査
npm run previewに対してLighthouseを実行し、実際のパフォーマンスを測定します。
バンドル分析
vite-bundle-visualizerまたはrollup-plugin-visualizerを追加して、バンドルの構成を確認します。
環境ファイル
本番ビルドではデフォルトで.env.productionを使用し、開発環境では.envを使用します。
ソースマップ
エラー監視のために本番用ソースマップを有効にします。ただし、プライバシーとデバッグのしやすさのバランスを考慮してください。
CIビルド
問題を早期に発見するため、デプロイ前にCIでビルドを実行します。
クイックチェック
npm run previewは何を行いますか？
まとめ
本番用にはbuildを使用し、デプロイ前のローカルでの本番相当のテストにはpreviewを使用します。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 41
- レッスン
- 163
よくある質問
「ビルドとプレビュー」レッスンは無料ですか？
はい。「ビルドとプレビュー」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。
「ビルドとプレビュー」で何を学びますか？
vite build と vite preview を実行して、本番用ビルドをローカルで確認します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Sveltejs Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「ビルドとプレビュー」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSveltejs Academyレッスンでコードを書いて実行できますか？
はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。