Vue SPA ファースト スクリーン最適化ソリューション

序文

通常の vue プロジェクトをパッケージ化してアクセスすると、div のみを含む html が返され、その他のコンテンツ ブロックは js によって動的に生成されます。

大きな問題が 2 つあります。

• SEOには良くない
• 最初の画面の読み込みが遅く、ユーザーエクスペリエンスが良くない
  

この記事は、私がプロジェクト経験に基づいてまとめた解決策です。不備があれば指摘してください〜

最適化

ソ連

SSR (サーバーサイドレンダリング) はサーバーサイドレンダリングであり、Vue コンポーネントをサーバー側で組み立てられた HTML 文字列にレンダリングし、それを直接ブラウザに送信します。最後に、これらの静的タグをクライアント上で完全にインタラクティブなアプリケーションにミックスする必要があります。
ssr を使用してビルド プロジェクトを再デプロイした後:

返されたコンテンツには、最初の画面コンテンツの HTML コード ブロックがすでに含まれていることがわかります。完璧です!~.~

スピーディーポータル: vue-cli4.0+Typescript+SSR をベースにした小さなデモ

オンデマンドインポート

オンデマンドインポートにはes6モジュールを使用する

1. ルーティングファイルでコンポーネントをオンデマンドでインポートする

# ルータ.index.ts
関数createRouter()をエクスポートする{
 新しいルーターを返す({
 モード: '履歴'、
 ルート: [
  {
  パス： '/'、
  名前: 'ホーム'、
  コンポーネント: () => import(/* webpackChunkName: "Home" */ './views/Home.vue'),
  },
  {
  パス: '/about',
  名前: 'About'、
  コンポーネント: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
  },
 ]、
 });
}

2. 静的ライブラリは、すべてのモジュールをインポートするのではなく、必要に応じてインポートします。

たとえば、element-ui ライブラリでは、ボタン コンポーネントのみを使用します。

輸入 {
 ボタン
} 'element-ui' から;

リクエストの最適化

1. CSSとJSの配置順序

css ファイルはヘッダーに配置され、js ファイルは body の前に配置されますが、vue がすでに処理してくれています〜

2. フォントアイコンを使用し、アイコンリソースにはスプライト画像を使用する

HTTP では接続を確立するために 3 回のハンドシェイクが必要であることはご存じのとおりです。リクエストが多すぎると読み込み速度に影響します。

Tencent の公式 Web サイトの次の図に示すように、ページ上のアイコンなどの不要な静的リソースを削減するように努める必要があります。

完成した画像を直接インポートし、background-positionに応じて画像の位置を設定します。

CDNを使用する

アクセス速度を向上させるために静的リソースがCDNにアップロードされます

CDNなし:

CDN の使用:

CDN を使用すると、静的ファイルが GZIP で圧縮され、ダウンロード速度が大幅に向上することがわかります。

エントリチャンクの最適化

エントリ チャンク ファイルを分割し、一部の静的ライブラリを分離すると、パッケージ化が高速化され、読み込みが最適化されます。

以下に示すように、vuejs、axios、vuex などの一部の静的ライブラリが分離されています。ブラウザがダウンロードのために複数のダウンロード スレッドを開くことがわかります。これらの静的ライブラリを分離しないと、エントリ チャンクが非常に大きくなり、読み込み速度が低下することが予想されます。

element-ui ライブラリを分離します。開発環境については心配する必要はありません。分離するのは、prod 環境のみです。vue パッケージ構成でライブラリを削除するだけです。

設定ファイル
Webpack を構成する: {
 外部:
 process.env.NODE_ENV === 'production'
  ? {
  '要素-UI': '要素-UI',
  }
  ： 未定義、
},

# index.html 静的リソースを手動でインポートします <script src="/js/element-ui/element-ui.2.11.1.js"></script>

以上がVue SPAファーストスクリーン最適化プランの詳細です。Vue SPAファーストスクリーン最適化の詳細については、123WORDPRESS.COMの他の関連記事にご注目ください。