vue と Element-plus のパフォーマンスを最適化し、Web ページの読み込み速度を向上させる方法-Vue.js-php.cn

vue と Element-plus のパフォーマンスを最適化し、Web ページの読み込み速度を向上させる方法

王林

リリース： 2023-07-17 20:25:41

オリジナル

2002 人が閲覧しました

Vue と Element Plus のパフォーマンスを最適化し、Web ページの読み込み速度を向上させる方法

最新の Web アプリケーションでは、パフォーマンスは非常に重要な考慮事項です。 Vue.js と Element Plus を使用してアプリケーションを構築する場合、ユーザーに優れたエクスペリエンスを提供するために、Web ページが迅速に読み込まれるようにする必要があります。この記事では、Vue と Element Plus のパフォーマンスを最適化するいくつかの方法を紹介し、対応するコード例を示します。

実稼働環境を使用したビルド

Web アプリケーションをデプロイする前に、必ず Vue の実稼働環境ビルドを使用してください。運用環境のビルドでは、開発フェーズ中にデバッグコードが削除され、コードが圧縮されてファイルサイズが削減されます。次のコマンドを使用してビルドします。

npm run build

ログイン後にコピー

CDN を使用した Vue と Element Plus の導入

アプリケーションに直接ではなく、CDN から Vue と Element Plus を導入します。 CDN (コンテンツ配信ネットワーク) は高いダウンロード速度を提供でき、ユーザーが他のサイトに同じスクリプトをロードしている可能性があり、キャッシュを使用してロードを高速化できます。以下は、Vue と Element Plus を紹介する CDN リンクです:

<!-- Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- Element Plus -->
<link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-plus/lib/index.js"></script>

ログイン後にコピー

オンデマンドでコンポーネントを紹介

Element Plus には、非常に豊富なコンポーネントライブラリがあります。ただし、すべてのコンポーネントが必要ない場合は、オンデマンドでコンポーネントを導入して、アプリケーション全体のファイルサイズを削減できます。 Element Plus が提供する [babel-plugin-component](https://github.com/element-plus/babel-plugin-component) プラグインを使用すると、構成を通じてコンポーネントをオンデマンドで導入できます。サンプルコードは次のとおりです。

まず、プラグインをインストールします。

npm install babel-plugin-component -D

ログイン後にコピー

次に、次の内容を babel.config.js 構成ファイルに追加します。

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-plus',
        styleLibrary: {
          name: 'theme-chalk',
          base: false
        },
        // 需要按需引入的组件
        components: [
          'ElButton',
          'ElInput',
          // 其他组件...
        ]
      }
    ]
  ]
}

ログイン後にコピー

オンデマンドでコンポーネントを導入すると、ファイルサイズを削減し、Web ページの読み込み速度を向上させることができます。

キープアライブキャッシュコンポーネントを使用する

Vue では、<keep-alive> コンポーネントを使用して、他のコンポーネントのインスタンスをキャッシュできます。 , これにより、コンポーネントを毎回再レンダリングする必要がなくなり、パフォーマンスが向上します。たとえば、Element Plus テーブルコンポーネントを使用する場合、<keep-alive> を使用してテーブルインスタンスをキャッシュできます。サンプルコードは次のとおりです。

<template>
  <keep-alive>
    <el-table
      v-if="showTable"
      :data="tableData">
      <!-- 表格列定义 -->
    </el-table>
  </keep-alive>
</template>

<script>
export default {
  data() {
    return {
      showTable: true,
      tableData: []
    }
  },
  mounted() {
    // 获取表格数据
    this.getTableData()
  },
  methods: {
    getTableData() {
      // 异步获取表格数据
      // ...
      // 获取成功后，将数据赋值给tableData
      this.tableData = data
      // 显示表格
      this.showTable = true
    }
  }
}
</script>

ログイン後にコピー

<keep-alive> コンポーネントを使用すると、テーブルコンポーネントを毎回再レンダリングする必要がなくなり、パフォーマンスが向上します。

ルーティング遅延読み込みを使用する

アプリケーションに複数のページがある場合、Vue のルーティング遅延読み込みを使用すると、ページコンポーネントをオンデマンドで読み込んで初期読み込み速度を向上させることができます。 import() を構成して Vue Router にページコンポーネントを動的にインポートすることで、ルートの遅延読み込みを実現できます。サンプルコードは以下のとおりです。

// 路由配置
const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('./views/Home.vue')
    },
    {
      path: '/about',
      name: 'About',
      component: () => import('./views/About.vue')
    },
    // 其他路由...
  ]
})

ログイン後にコピー

ルーティング遅延ロードを使用すると、ユーザーが特定のページにアクセスしたときに、該当するコンポーネントを再ロードすることができ、最初にロードされるファイルのサイズが削減され、ロード速度が向上します。

概要

上記の最適化方法に従うことで、Vue および Element Plus アプリケーションのパフォーマンスを向上させ、Web ページの読み込みを高速化できます。これらの方法では追加の構成やコーディング作業が必要になる場合がありますが、ユーザーにより優れたエクスペリエンスを提供し、アプリケーションの競争力を高めることができます。 Vue と Element Plus のパフォーマンスの最適化は、技術的なタスクであるだけでなく、優れたユーザーエクスペリエンスを提供するための重要な要素でもあります。

以上がvue と Element-plus のパフォーマンスを最適化し、Web ページの読み込み速度を向上させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。