Vue SPAトップ画面最適化方案

前言
従来のvueプロジェクトはパッケージ化されてからアクセスし、divのみを含むhtmlを返します。他のコンテンツブロックはjsを通じて動的に生成されます。

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

はseo

に不利です。

首のスクリーンはページをロードするのが遅くて、ユーザーの体験はよくありません。

この文章は自分でプロジェクトの経験に基づいてまとめた方案です。不足があれば、ご指摘ください。
最適化
SSR
SSR（Server-Seide Rendering）は、サーバー側でvueコンポーネントを組み立てられたHTML文字列としてレンダリングし、ブラウザに直接送信し、最後にこれらの静的タグをクライアント上で完全にインタラクティブなアプリケーションプログラムにミックスする必要があります。
ssrを使って構築項目を再配置した後：

戻ってきた内容を見ることができます。既にファーストスクリーンの内容が含まれています。コードブロック、perfect！~。
超速トランスポートゲート：vue-cli 4.0+Typeescript+SSRに基づく小さいDemo
必要に応じて導入する
es 6 moduleを使って必要に応じて導入します。
1.ルートファイルに必要に応じてコンポーネントを導入する

# router.index.ts
export function createRouter() {
 return new Router({
 mode: 'history',
 routes: [
  {
  path: '/',
  name: 'Home',
  component: () => import(/* webpackChunkName: "Home" */ './views/Home.vue'),
  },
  {
  path: '/about',
  name: 'About',
  component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
  },
 ],
 });
}

2.スタティックライブラリは必要に応じてモジュールを導入し、全部ではない。
element-uiライブラリのように、私はbuttonコンポーネントだけを使いたいです。

import {
 button
} from 'element-ui';

最適化を要求する
1.css、js配置順
cssファイルはheaderの中に置いて、jsファイルはbodyの前に置いて、でもvueはすでに私達のために処理しました。
2.フォントアイコンを使用して、iconリソースはスプライトを使用します。
httpは一回の接続を作るには3回の握手が必要だと知っています。多すぎる要求はロード速度に影響します。
不必要な静的資源に対して、私達はできるだけ減らすべきです。例えば、ページの中のiconアイコンは下記の通りです。

完成した写真を直接紹介して、background-positionによって写真の位置を設定します。
CDNを使う
静的リソースはCDNにアップロードされ、アクセス速度がアップする。
CDNを使わない:

CDNを使う:
CDNを使うと、静的なファイルはGZIP圧縮され、ダウンロード度が大幅に向上します。

入口chunk最適化
入り口chunkファイルを分割して、いくつかの静的なライブラリを分離して、加速して包装することができます。ロードを最適化することもできます。
以下のように、いくつかの静的なライブラリを分離しました。vuejs、axios、vuexなど、ブラウザが複数のダウンロードスレッドを開いてダウンロードします。これらのスタティックライブラリを分離していないと、入口chunkが非常に大きくなります。負荷速度は予想できます。

element-uiライブラリを分離して、dev環境は私達は管理しなくてもいいです。prod環境の下で私達は分離します。vueパッケージ構成の中でこのライブラリを削除するだけでいいです。

# vue.config.js
configureWebpack: {
 externals:
 process.env.NODE_ENV === 'production'
  ? {
  'element-ui': 'element-ui',
  }
  : undefined,
},

# index.html         
<script src="/js/element-ui/element-ui.2.11.1.js"></script>

以上がVue SPAのファーストスクリーン最適化方案の詳細です。Vue SPAのファーストスクリーン最適化に関する資料は他の関連記事に注目してください。