Импорт динамического пути для отложенной загрузки компонентов с использованием реагирующей загрузки

Question

Я создаю приложение с использованием create-реагировать на приложение и лениво загружаю компонент с использованием реагирующей загрузки.

То, что я хочу сделать, это импортировать динамические пути для объекта-загрузчика или функцию Loadable в реагирующе-загружаемом модуле.

Код:

const LoadableComponent = path =>
 Loadable({
  loader: () => import(`${path}`),
  loading: Loader,
 })

const Home = LoadableComponent('./../../pages/Home')
const User = LoadableComponent('./../../pages/User')

Если я поставлю строку пути вместо переменной пути (например, import ('./ pages / Home')) и вызову функцию, она работает. Но когда я использую его как код выше, загрузчик загрузится, но больше не будет загружать компонент. Почему это не работает, если я использую переменную в импорте?

Answer 1

Насколько я знаю, пакет (Webpack) должен иметь возможность обрабатывать путь к файлу заранее.

Мой вопрос: зачем это нужно? Что плохого в том, чтобы писать?

const Home = Loadable({
  loader: () => import('./pages/Home'),
  loading: Loader,
})

const User = Loadable({
  loader: () => import('./pages/User'),
  loading: Loader,
})

Бонус: обратите внимание на новый React's lazy API , недавно выпущенный в 16.6. На связанной странице также есть полезная информация о разделении кода.

Answer 2

Нашел ответ здесь

"Чтобы Webpack мог обрабатывать импорт, он должен уметь хотя бы приблизительно угадывать, на что ссылается import ()."

Оказывается, ваш путь не может быть слишком анонимным. Полагаю, что Webpack уверенно знает, что я импортирую.