Динамически импортируемые модули без относительных путей - PullRequest
Новая
       5

Динамически импортируемые модули без относительных путей

0 голосов
/ 13 февраля 2019

У меня есть приложение Symfony, которое использует React для создания внешнего интерфейса.Начиная с нашего последнего выпуска размер сборки приложения реагирования стал слишком большим и фактически не хватает памяти на сервере, который пытается скомпилировать.Я пытался реализовать разбиение кода и чтобы начальная загрузка страницы была намного более эффективной.У меня проблема с маршрутами.

Мой маршрутизатор определен примерно так: 

import React from 'react';
import Loadable from 'react-loadable';
import DelayedLoading from 'components/DelayedLoading';
export default [
  component: Loadable({loader: () => import('containers/Page'), loading: DelayedLoading}),
  routes: [
    {
      path: '/',
      component: Loadable({loader: () => import('containers/MainPage'), loading: DelayedLoading}),
    },
    {
      path: '/foo/bar',
      component: Loadable({loader: () => import('containers/FooBarPage'), loading: DelayedLoading}),
    },
  ]
];

В моем конфиге веб-пакета я определил 

module.exports = {
  output: {
    path: path.resolve(__dirname, 'web'),
    filename: 'react/js/[name].js',
  },
}

Каждый раз, когда путь составляет два или более глубины, порции пытаются загрузить из неправильного каталога,Например, вышеприведенный маршрут foo/bar попытается загрузить фрагменты в foo/react/js/___.js, но фрагменты, загруженные из маршрута /, или любого маршрута, который имеет глубину только один, будет корректно загружаться из react/js/___.js.

Как я могу получить все куски для загрузки с react/js?

Ответы [ 2 ]

0 голосов
/ 09 мая 2019

Решение было найдено при обсуждении вопроса, но я выкладываю окончательный ответ здесь на тот случай, если кто-то сталкивается с этим вопросом и ищет принятый ответ, а не читает комментарии.Большое спасибо @Adam за то, что он подтолкнул меня в правильном направлении.

Мне пришлось обновить output конфигурацию следующим образом: 

module.exports = {
  output: {
    path: path.resolve(__dirname, 'web/react/js'),
    publicPath: '/react/js',
    filename: '[name].js',
  }
}

С этой компиляцией конфигурации код выведет на web/react/js/, но код из Интернета будет обслуживаться с /react/js/.Webpack не будет автоматически добавлять префикс к серверу JS-кода на основе маршрута страницы, пытающейся получить к нему доступ.

0 голосов
/ 13 февраля 2019

Я избегаю этих проблем, используя веб-пакет разрешения вместо

...