Управление зависимостями Webpack и асинхронная загрузка компонентов Vue.js

Question

Я пытаюсь добиться динамической регистрации Vue.js async component. Это видео дало мне код, который прекрасно работает, но загружает все модули, даже если они не используются.

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
// Require in a base component context
const requireComponent = require.context(
  '../components/base', false, /base-[\w-]+\.vue$/,
)
requireComponent.keys().forEach(fileName => {
  // Get component config
  const componentConfig = requireComponent(fileName)
  // Get PascalCase name of component
  const componentName = upperFirst(
    camelCase(fileName.replace(/^\.\//,
      '').replace(/\.\w+$/,
      '')),
  )
  // Register component globally
  Vue.component(componentName, componentConfig.default || componentConfig)
})

Вместо этого я попытался создать асинхронные компоненты.Примерно так:

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
// Require in a base component context
const requireComponent = require.context(
  '../components/base', false, /base-[\w-]+\.vue$/,
)
requireComponent.keys().forEach(fileName => {
  const componentPath = fileName.replace('./', '../components/base/');
  // Get PascalCase name of component
  const componentName = upperFirst(
    camelCase(fileName.replace(/^\.\//,
      '').replace(/\.\w+$/,
      '')),
  )
  // Register component globally
  Vue.component(componentName, () => import(componentPath))
})

Если в случае кода выше vue выдает ошибку

vue.esm.js:591 [Vue warn]: Failed to resolve async component: function () {
    return __webpack_require__("./lib lazy recursive")(componentPath);
  }
Reason: Error: Cannot find module '../components/base/base-button.vue'

Если я вручную записываю Vue.component('BaseButton', () => import('../components/base/base-button.vue')), это работает без проблем, но когда я пытаюсь это сделатьдинамически это не удается.Можно ли сделать такую ​​async component регистрацию, если да, то как?

Это тоже не сработает:

const button = '../components/base/base-button.vue'
Vue.component('BaseButton', () => import(button))

только если я буквально перенесу строку в функцию импорта.

Answer 1

import нельзя использовать, когда путь модуля полностью динамический.См. docs :

. Полностью динамические операторы, такие как import(foo), не будут работать, поскольку webpack требует, по крайней мере, некоторую информацию о расположении файла.Это потому, что foo может быть любым путем к любому файлу в вашей системе или проекте.import() должен содержать хотя бы некоторую информацию о том, где находится модуль, поэтому пакетирование может быть ограничено определенным каталогом или набором файлов.

Вы не указали аргумент modeдля require.context, который по умолчанию равен «sync»;это означает, что все соответствующие модули будут загружены сразу.Вы хотите использовать «ленивый», который генерирует загружаемый ленивый чанк для каждого модуля.

Не проверено, но я думаю, что это будет что-то вроде этого:

const context = require.context('../components/base', false, /base-[\w-]+\.vue$/, 'lazy');

context.keys().forEach(fileName => {
  const componentPath = fileName.replace('./', '../components/base/');

  // Get PascalCase name of component
  const componentName = upperFirst(
    camelCase(fileName.replace(/^\.\//,
      '').replace(/\.\w+$/,
      '')),
  );

  // Register component globally
  Vue.component(componentName, () => context(fileName));
});