フロントエンド開発では、Web サイトとアプリケーションが成長し続けるにつれて、コードを最適化して読み込みを軽くし、より速くすることを検討する必要があります。このプロセスでは、オンデマンド読み込みとツリー シェイクを使用して、アプリケーションは可能な限り最適化されます。
Vue は、人気のある JavaScript フレームワークとして、アプリケーションのパフォーマンスを向上させるために、オンデマンドでツリー シェイキングをより簡単にロードして使用できるようにする多くのツールとスキルを提供してきました。この記事では、これらのテクニックを Vue で実装する方法について詳しく説明します。
遅延読み込みとは、ユーザーが特定のページまたはコンポーネントにアクセスする必要があるときに、必要な JavaScript および CSS ファイルが読み込まれるため、ページの読み込みが高速化されることを意味します。必要なコードのみがロードされます。 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 の場合にのみロードされ、レンダリングされます。
Vue 非同期コンポーネントに加えて、webpack はコード分割機能も提供します。コード分割は、アプリケーションをより小さなモジュールに分割して、相互に独立させるフロントエンド テクノロジです。コード分割を使用すると、JavaScript ファイルと CSS ファイルをオンデマンドで読み込むことができます。
コード分割を実装するには、webpack が提供する次のメソッドを使用する必要があります。
import(/* webpackChunkName: "my-chunk-name" */ './my-component.js')
webpackChunkName は、コード チャンクに名前を付ける方法を webpack に指示します。このファイルは別のコード ブロックにパッケージ化され、動的にロードされます。
ツリー シェイキングは、アプリケーションから未使用のコードを削除する手法です。これは、JavaScript で、特に多くのサードパーティ ライブラリを使用する場合に役立ちます。ツリー シェイキングは、どのライブラリのコードが使用されていないかを判断するのに役立ち、それによってアプリケーションを最適化できます。
Vue では、次の手順を使用してアプリケーションを最適化し、ツリーの揺れを実装できます。
Vue アプリケーションは ES6 モジュールを使用する必要があります。これは、モジュールのインポートとエクスポートには import/export ステートメントを使用する必要があることを意味します。 ES6 モジュールを使用すると、Webpack で Tree Shaking テクノロジーを使用できるようになります。
モジュールからインポートされた最適化プラグインである babel-plugin-transform-imports をインストールする必要があります。このプラグインは、Webpack でパッケージ化するときに、インポートされたモジュール コードを最適化します。
次の設定を .babelrc に追加する必要があります:
{ "plugins": [ ["transform-imports", { "lodash": { "transform": "lodash/${member}", "preventFullImport": true } }] ] }
ツリー シェイキングを有効にするには、次のコード ブロックを使用する必要があります。 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 サイトの他の関連記事を参照してください。