Vueプロジェクトが完了した後にプロジェクトを最適化する方法の例

1. 開発モードとリリースモードに異なるパッケージエントリポイントを指定する

vue ui によって作成されたプロジェクトは、webpack 構成を非表示にします。src ルート ディレクトリに vue.config.js 構成ファイルを作成できます。構成ファイル内の構成オブジェクトをエクスポートします。

2. デフォルトでは、Vue プロジェクトの開発モードとリリース モードは、パッケージ化されたエントリ ファイル (src/main.js) を共有します。 configureWebpackまたはchainWebpackを使用して、webpackパッケージ構成を定義できます。

main.js ファイルを main-dev.js に変更します。 main.jsをコピーしてmain-prod.jsに変更します。

2. 外部CDNリソースを外部から読み込む

デフォルトでは、インポート構文を通じてインポートされたサードパーティの依存関係パッケージは、最終的に同じファイルにパッケージ化されてマージされるため、パッケージ化が成功した後に 1 つのファイルが大きすぎるという問題が発生します (インポートした CSS スタイルシートも同じファイルにパッケージ化されるため、ファイルが大きすぎます)。

上記の問題を解決するには、webpack の externals ノードを通じて外部 CDN リソースを設定およびロードすることができます。外部で宣言されたサードパーティの依存パッケージはパッケージ化されず、最終ファイルにマージされません。

①webpackのexternalsノードを設定し、リリースステージで設定する

外部で宣言されたサードパーティの依存パッケージはパッケージ化されません。プロジェクトは、依存パッケージを使用するときに、ウィンドウ グローバルで対応するオブジェクトを検索します。したがって、CDNからのjsとcssのリソースをindex.htmlファイルに導入して、グローバルに見つけられるようにする必要があります。

public/index.html ファイルのヘッダーに次の CDN リソース参照を追加する必要があります。

具体的な操作手順：
① main-prod.js で、nprogress と quill が参照する css ファイルをコメントアウトする ② index.html の head 領域で、nprogress と quill の js と css スタイルを CDN 経由で読み込む ③ index.html の head 領域で、残りの依存 js を CDN 経由で読み込む

対応するオープンソースライブラリはstaticfile CDNから見つけることができます。

CDN を使用する前のファイル サイズ:

CDN 使用後のファイル サイズ:

3. CDNを通じてElementUIパッケージを最適化する

開発段階では、パッケージ サイズを可能な限り削減するために element-ui コンポーネントのオンデマンド読み込みを有効にしましたが、オンデマンドで読み込まれるコンポーネントは依然として大きなファイル サイズを占めています。この時点で、CDN を介して element-ui のコンポーネントを読み込むこともできるため、パッケージ化されたファイルのサイズをさらに削減できます。

具体的な操作手順は以下のとおりです。
① main-prod.js で、element-ui がオンデマンドで読み込まれるようにコードをコメントアウトする ② index.html の head 領域で、CDN 経由で element-ui の js と css スタイルを読み込む

完成ファイルサイズ:

4. ホームページコンテンツのカスタマイズ

①ホームページの内容はパッケージ環境によって異なる場合があります。プラグインを通じてカスタマイズできます。プラグインの構成は次のとおりです。

 // plugin('html') を通じて、HTML プラグインを検索します。 tap() を使用すると、このプラグインの固定構成項目を変更できます。// args を使用すると、現在のプラグインの関連するパラメータを取得できます。
  // args[0]にカスタム属性isprodを追加します。開発フェーズではtrueに割り当てられ、リリースフェーズではfalseに割り当てられます。

② public/index.htmlホームページでは、isProdの値に基づいてページ構造をどのようにレンダリングするかを決定できます。

5. ルートの遅延読み込みを使用する

プロジェクトをパッケージ化してビルドすると、ルートに対応するすべてのコンポーネントが 1 つのファイルにパッケージ化されるため、ファイルが大きくなりすぎてページの読み込みに影響します。異なるルートに対応するコンポーネントを異なるコード ブロックに分割し、ルートにアクセスしたときに対応するコンポーネントをロードできれば、より効率的になります。

これで、Vue プロジェクトが完了した後に最適化する方法に関するこの記事は終了です。Vue プロジェクトの最適化に関するその他のコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。