Webpackダイナミックコメントを備えたVueの怠zyなロードルート

JavaScriptルーティングメカニズムは通常、どの相対URLパターンがどのコンポーネントレンダリングに対応するかを指定します。たとえば、 /aboutパスをレンダリングする必要があります<about></about>コンポーネント。この記事では、Vue/Vueルーターでの怠zyなロードでこれを達成する方法を説明し、できるだけ簡潔に行うことについて説明します。

この記事をすべて含むコードのリポジトリは、GitHubで入手できます。

Vueルート（URL）を見たことがあるかもしれません。

 「Vue」からVueを輸入する
「Vue-Router」からVuerouterをインポートします

'../views/home.vue'から家を輸入する
'../views/about.vue'からのインポート
'../views/login.vue'からログインをインポート

vue.use（vuerouter）

const routes = [
  {path： '/'、name： 'home'、component：home}、
  {path： '/about'、name： 'about'、component：about}、
  {path： '/login'、name： 'login'、component：login}
]

const router = new Vuerouter（{
  ルート
}）

デフォルトルーターをエクスポートします

このコードは/パスにロードされます<home></home>コンポーネント、パスの内/about荷重<about></about>コンポーネント、ロードイン/loginパス<login></login>コンポーネント。

ただし、このコードセグメンテーションの方法は、必要に応じて動的にロードするのではなく、3つのコンポーネントすべてが一緒にパッケージ化されているため、うまく行われません。

コードセグメンテーションに動的なインポートステートメントとWebパックチャンク名を使用する改善点は次のとおりです。

 const routes = [
  {
    パス： '/'、
    名前：「ホーム」、
    コンポーネント：（）=> import（/ * webpackchunkname： "home" */'../views/home.vue'）
  }、
  {
    パス： '/about'、
    名前： 'about'、
    コンポーネント：（）=> import（/ * webpackchunkname： "about" */'../views/about.vue'）
  }、
  {
    パス： '/login'、
    名前：「ログイン」、
    コンポーネント：（）=> import（/ * webpackchunkname： "login" */'../views/login.vue'）
  }
]

このアプローチは、明らかな欠点がなく、わずかに長くて反復的です。優れた開発者として、それを改善するためにいくつかの抽象化を行い、配列を使用して.map操作を実行しましょう。

 constrouteoptions = [
  {path： '/'、name： 'home'}、
  {path： '/about'、name： 'about'}、
  {path： '/login'、name： 'login'}
]

const routes = routeoptions.map（route => {
  戻る {
    ...ルート、
    コンポーネント：（）=> import（ `@/views/$ {route.name} .vue`）
  }
}）

const router = new Vuerouter（{
  ルート
}）

これで、 componentキーの使用を削減し、代わりにインポート関数の引数としてルート名を使用します。

しかし、チャンク名を設定したい場合はどうなりますか？

私が知る限り、何らかのビルドステップなしではJavaScriptで動的な注釈を使用することはできません。したがって、この場合、コードの書き込みの量を減らすためにコメント（webpackchunkname）を犠牲にします。それはすべてあなたが好む方法に依存します。

冗談です、この問題を解決しましょう。

Webpack 2.6.0から始めて、プレースホルダー[index]と[request]がサポートされています。つまり、このような生成されたチャンクの名前を設定できます。

 // ...

constrouteoptions = [
  {path： '/'、name： 'home'}、
  {path： '/about'、name： 'about'}、
  {path： '/login'、name： 'login'}
]

const routes = routeoptions.map（route => {
  戻る {
    ...ルート、
    コンポーネント：（）=> import（/ * webpackchunkname： "[request]" */`../ views/$ {route.name} .vue`）
  }
}）

const router = new Vuerouter（{
  ルート
}）

とても良い！これで、すべての機能があり、名前付きチャンク付きの動的荷重ルートがあります。 VUE 2およびVUE 3で動作します。ターミナルでnpm run buildを実行して確認できます。

ただし、個々のコンポーネントの代わりに、Lazy Loadルートを名前付きチャンクにグループ化することで、さらに一歩進むこともできます。たとえば、最も重要なコンポーネントをまとめ、残りを別の「それほど重要ではない」グループにまとめるグループを作成できます。以前に使用した[request]プレースホルダーを置き換えるために、 webpackChunkName更新する必要があります。

 const routes = [
  {
    パス： "/"、
    名前：「ホーム」、
    コンポーネント：（）=>
      import（/ * webpackchunkname： "very -importantthings" */"../views/home.vue"）
  }、
  {
    パス： "/about"、
    名前：「bout」、
    コンポーネント：（）=>
      import（/ * webpackchunkname： "very -importantthings" */"../views/about.vue"）
  }、
  {
    パス：「/ログイン」、
    名前：「ログイン」、
    コンポーネント：（）=>
      import（/ * webpackchunkname： "notsosoportant" */"../views/login.vue"）
  }、
  {
    パス：「/連絡先」、
    名前：「連絡先」、
    コンポーネント：（）=>
      import（/ * webpackchunkname： "notsosoportant" */"../views/contact.vue"）
  }
];

これで、4つのコンポーネントが2つの別々のチャンクにグループ化されています。

それでおしまい！ VUEの怠zyな積み込みルートのテクニック、およびビルド時にそれらを名前を付けてグループ化する方法に関するいくつかの提案。

以上がWebpackダイナミックコメントを備えたVueの怠zyなロードルートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。