Vue でオンデマンド読み込みとツリーシェイキングを実装する方法

フロントエンド開発では、Web サイトとアプリケーションが成長し続けるにつれて、コードを最適化して読み込みを軽くし、より速くすることを検討する必要があります。このプロセスでは、オンデマンド読み込みとツリー シェイクを使用して、アプリケーションは可能な限り最適化されます。

Vue は、人気のある JavaScript フレームワークとして、アプリケーションのパフォーマンスを向上させるために、オンデマンドでツリー シェイキングをより簡単にロードして使用できるようにする多くのツールとスキルを提供してきました。この記事では、これらのテクニックを Vue で実装する方法について詳しく説明します。

オンデマンド読み込み

遅延読み込みとは、ユーザーが特定のページまたはコンポーネントにアクセスする必要があるときに、必要な JavaScript および CSS ファイルが読み込まれるため、ページの読み込みが高速化されることを意味します。必要なコードのみがロードされます。 Vue には、オンデマンド読み込みを実装する方法がいくつかあります。

1. Vue 非同期コンポーネントの使用

Vue は特別なコンポーネント タイプ (非同期コンポーネント) を提供します。非同期コンポーネントを使用すると、必要なコンポーネントのロードを遅らせることができます。

<template>
  <div>
    <button @click="loadComponent">Load Component</button>
    <div v-if="showComponent">
      <AsyncComponent />
    </div>
  </div>
</template>

<script>
  import AsyncComponent from './AsyncComponent.vue'
  export default {
    components: {
      AsyncComponent
    },
    data () {
      return {
        showComponent: false
      }
    },
    methods: {
      loadComponent () {
        this.showComponent = true
      }
    }
  }
</script>

この例では、表示コンポーネントのフラグを設定するloadComponentメソッドをトリガーするボタンを作成します。 AsyncComponent は、フラグが true の場合にのみロードされ、レンダリングされます。

2. webpack を使用したコード分割

Vue 非同期コンポーネントに加えて、webpack はコード分割機能も提供します。コード分​​割は、アプリケーションをより小さなモジュールに分割して、相互に独立させるフロントエンド テクノロジです。コード分​​割を使用すると、JavaScript ファイルと CSS ファイルをオンデマンドで読み込むことができます。

コード分割を実装するには、webpack が提供する次のメソッドを使用する必要があります。

import(/* webpackChunkName: "my-chunk-name" */ './my-component.js')

webpackChunkName は、コード チャンクに名前を付ける方法を webpack に指示します。このファイルは別のコード ブロックにパッケージ化され、動的にロードされます。

ツリー シェイキング

ツリー シェイキングは、アプリケーションから未使用のコードを削除する手法です。これは、JavaScript で、特に多くのサードパーティ ライブラリを使用する場合に役立ちます。ツリー シェイキングは、どのライブラリのコードが使用されていないかを判断するのに役立ち、それによってアプリケーションを最適化できます。

Vue では、次の手順を使用してアプリケーションを最適化し、ツリーの揺れを実装できます。

1.必ず ES6 モジュールを使用してください

Vue アプリケーションは ES6 モジュールを使用する必要があります。これは、モジュールのインポートとエクスポートには import/export ステートメントを使用する必要があることを意味します。 ES6 モジュールを使用すると、Webpack で Tree Shaking テクノロジーを使用できるようになります。

2. babel-plugin-transform-imports プラグインのインストール

モジュールからインポートされた最適化プラグインである babel-plugin-transform-imports をインストールする必要があります。このプラグインは、Webpack でパッケージ化するときに、インポートされたモジュール コードを最適化します。

次の設定を .babelrc に追加する必要があります:

{
  "plugins": [
    ["transform-imports", {
      "lodash": {
        "transform": "lodash/${member}",
        "preventFullImport": true
      }
    }]
  ]
}

3. webpack でツリー シェイキングを有効にする

ツリー シェイキングを有効にするには、次のコード ブロックを使用する必要があります。 in webpack.config.js:

module.exports = {
  //...
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all'
    }
  }
};

runtimeChunk は、コード内での再利用を避けるために 'single' に設定されます。

chunks: 'all' は、webpack がすべてのモジュール間で最小限のコードを共有することを保証し、ツリー シェーキングを実現します。

結論

オンデマンド読み込みとツリー シェーキング テクノロジは、アプリケーションのパフォーマンスを向上させるために不可欠です。 Vue では、Vue の非同期コンポーネントと webpack コード分割を通じて実装できます。また、babel-plugin-transform-imports プラグインと webpack のツリー シェーキング機能を使用して、未使用のコードを動的にロードして削除することもできます。

アプリケーションのパフォーマンスに常に注意を払い、パフォーマンスを向上させるツールやテクニックを使用する必要があります。

以上がVue でオンデマンド読み込みとツリーシェイキングを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。