Vue で SSR を使用してアプリケーションの最初の画面の読み込み速度を向上させる-Vue.js-php.cn

Vue で SSR を使用してアプリケーションの最初の画面の読み込み速度を向上させる

WBOY

リリース： 2023-07-19 10:07:47

オリジナル

1640 人が閲覧しました

Vue で SSR を使用してアプリケーションの最初の画面の読み込み速度を向上させる

フロントエンドテクノロジの継続的な開発に伴い、フロントエンドアプリケーションのパフォーマンスの最適化も開発者の焦点になっています。最新のフロントエンド開発では、シングルページアプリケーション (SPA) が主流になっており、Vue や React などのフレームワークの人気により、これらのフレームワークを使用してアプリケーションを構築する開発者が増えています。ただし、SPA アプリケーションは初めてロードするときに大量の JavaScript コードをダウンロードして解析する必要があるため、最初の画面のロード速度が遅くなります。この問題を解決するには、サーバーサイドレンダリング (SSR) を使用して、アプリケーションの最初の画面の読み込み速度を向上させます。

Vue は、正式にサポートされているサーバー側レンダリングソリューションを提供します。これにより、Vue アプリケーションのレンダリングロジックをサーバー側に配置して実行し、レンダリング結果をブラウザーに直接送信して、所要時間を短縮できます。ブラウザが JavaScript を解析できるようにすることで、アプリケーションの最初の画面の読み込み速度が向上します。

次の簡単な例は、Vue でサーバー側レンダリングを使用して、アプリケーションの最初の画面の読み込み速度を向上させる方法を示しています。

まず、vue-cli スキャフォールディングツールをインストールして、新しいプロジェクトを作成する必要があります:

npm install -g @vue/cli
vue create my-app

ログイン後にコピー

次に、必要な依存関係をプロジェクトにいくつかインストールする必要があります:

cd my-app
npm install vue-server-renderer express

ログイン後にコピー

server.js ファイルを作成し、そのファイルにサーバー側ロジックを書き込みます。コードは次のとおりです:

const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()

server.get('*', (req, res) => {
  const app = new Vue({
    data: {
      message: 'Hello, Vue SSR!'
    },
    template: '<div>{{ message }}</div>'
  })

  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }

    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Hello</title></head>
        <body>${html}</body>
      </html>
    `)
  })
})

server.listen(3000, () => {
  console.log('Server is running at http://localhost:3000')
})

ログイン後にコピー

次に、サーバーを起動するコマンドを package.json に追加します:

{
  "scripts": {
    "serve": "node server.js"
  }
}

ログイン後にコピー

最後に、次のコマンドを実行してサーバーを起動できます:

npm run serve

ログイン後にコピー

この時点で、http://localhost:3000 にアクセスしてサーバーレンダリングの結果を表示できます。レンダリング結果がブラウザに直接返され、読み込みの遅延の問題がなく、アプリケーションの最初の画面の読み込み速度が向上していることがわかります。

上記の例を通じて、Vue のサーバー側レンダリングテクノロジを使用すると、アプリケーションの最初の画面の読み込み速度が大幅に向上することがわかります。ただし、サーバーサイドレンダリングの導入によりさらに複雑さが増すため、開発プロセス中にいくつかの特別な箇所に注意を払う必要があります。たとえば、サーバーサイドのレンダリングでは、ブラウザー内のグローバルオブジェクト (ウィンドウやドキュメントなど) を直接使用することはできず、代わりに Vue が提供する特別なグローバルオブジェクトを使用する必要があります。さらに、開発プロセス中は互換性とパフォーマンスの問題にも注意を払う必要があります。

要約すると、Vue のサーバー側レンダリングテクノロジは、アプリケーションの最初の画面の読み込み速度の向上に役立つ強力なツールです。ただし、使用中に考慮する必要がある特別な考慮事項がいくつかあり、さらに複雑になります。アプリケーションで最初の画面の読み込み速度が速い必要がある場合は、サーバー側レンダリングを使用するのが良い選択です。

以上がVue で SSR を使用してアプリケーションの最初の画面の読み込み速度を向上させるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。