Vueルーティングの怠惰なロードを実現する方法とパッケージの問題

一、ルートの怠惰なロードを実現する方式
Webpackはamd、commonJS、es 6の3つのモジュール構文をサポートしているため、vueがダイナミックパスを実現するには3つの方法があります.
1.AMD仕様を使用したrequire構文

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: resolve => require(['../views/About.vue'], resolve)
  },
]

この構文では、モジュールの名前を指定することはできません.デフォルトでは、webpack構成のoutput.chunkFileNameが使用されます.
2.commonJS仕様のrequireを使用する.ensure構文
require.ensure()はwebpack特有で、import()に取って代わられています.

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
     component: resolve => require.ensure([], () => resolve(
      require('@/' + about + '.vue')
    ), 'about')
  },
]

この構文と次のimport構文は、モジュール名を指定できます.
3.ES 6オリジナルのimport構文を使う

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
]

これはvue-cli 3のデフォルトの使用方法です.
二、怠惰なロードで発生する可能性のあるパッケージの問題
以上の3つの方法では、パスパラメータに変数が含まれている場合、webpackパッケージに問題が発生します.
1.import()は、そのコンポーネントが存在するディレクトリ内のすべてのコンポーネントを導入します.

const about = 'views/About'
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ `../${about}.vue`)
  },
]

これにより、ルーティングに構成されていない場合でも、viewsディレクトリの下のすべてのコンポーネントがパッケージ化されます.したがって、wbepackChunkNameで指定されたファイル名も変更され、上記のAboutページコンポーネントはabout1、about2のような名前にパッケージされます.後続のルーティング構成のパスパラメータにも変数がある場合は、webpackChunkNameを指定しても、最初のimportで指定されたwebpackChunkNameに従ってパッケージされます.例:

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ `../${about}.vue`) //    about2.js
  },
  {
    path: '/test',
    name: 'Test',
    component: () => import(/* webpackChunkName: "test" */ `../${test}.vue`) //       about3.js       ，   test.js
  },

2.require()とrequire.Ensureは、変数付きのすべてのルーティングコンポーネントをjsにパッケージ化します.

let home = 'views/Home'
let about = 'views/About'
let test = 'views/Test'
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: resolve => require(['../' + about + '.vue'], resolve)
  },
  {
    path: '/test',
    name: 'Test',
    component: resolve => require(['../' + test + '.vue'], resolve)
  },

aboutページコンポーネントとtestページコンポーネントは、同じjsファイルにパッケージされます.
したがって、パスパラメータに変数を持ち込まないようにします.