Почему у меня не работает разделение кода веб-пакета?

Я использую require.ensure для создания точек разделения на путях react-router. Однако в моем каталоге сборки все еще есть только app.js в дополнение к vendor.js. Я ожидал отдельный файл js для каждого пути, который я использовал require.ensure.

Я использовал require.ensure для каждого пути следующим образом:

<Route path= 'auth' getComponent={(nextState, callback) => {
  require.ensure([], (require) => {
    callback(null, require('containers/Authenticate/AuthenticateContainer.js').default)
  }, 'auth')
}}/>

вывод конфигурации моего веб-пакета для сборки выглядит следующим образом:

output: {
  path: PATHS.build,
  filename: '/[name].[chunkhash].js',
  chunkFilename: '/[chunkhash].js'
}

Вот суть моего файла маршрута и моего файл конфигурации веб-пакета целиком.

ОБНОВЛЕНИЕ: я понял, что делал неправильно. Структура моего проекта для контейнеров выглядит так:

-app
 -containers
   -containerA.
     -containerA.js
   -containerB
     -containerB.js
   -containerC
     -containerC.js
   -index.js

Проблема: я все еще экспортировал контейнеры, которые мне требовались, в файл маршрутов, например:


webpack reactjs react-router lazy-loading code-splitting
person jasan    schedule 28.09.2016    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Убедитесь, что принимает массив аргументов модулей, которые вы хотите потребовать. Вам нужно предоставить массив с именами модулей, которые вы хотите динамически загружать. В вашем случае предоставьте 'containers/Authenticate/AuthenticateContainer.js', чтобы обеспечить следующее:

require.ensure(['containers/Authenticate/AuthenticateContainer.js'], (require) => {
      callback(null, require('containers/Authenticate/AuthenticateContainer.js').default)
    }, 'auth');
person cgatian    schedule 29.09.2016
comment
добавление, которое не имеет значения для каталога сборки. - person jasan; 29.09.2016
comment
есть ли что-то в конфигурации веб-пакета, которое мне нужно включить, чтобы он работал. - person jasan; 29.09.2016
comment
Если вы скопировали дословно, я пропустил одну кавычку в конце. Нет, не должно быть ничего другого, что вам нужно настроить. - person cgatian; 29.09.2016
comment
@jasan, пожалуйста, дайте нам знать, что случилось - person Dimitris Karagiannis; 05.10.2016
comment
@MitchKarajohn Я еще не решил эту проблему. У меня есть один вариант — перейти на webpack 2.0 и использовать новый system.imports, но это также потребует от меня внесения множества других изменений в мою конфигурацию. Поэтому я воздержусь от этого. - person jasan; 05.10.2016
comment
Сегодня запущу песочницу, посмотрим, что там. Если у вас есть время, закоммитьте свой код на github, и я могу взглянуть. - person cgatian; 05.10.2016
comment
@cgatian Я уже связал файлы конфигурации и маршруты. Их недостаточно? - person jasan; 07.10.2016

arrow_upward
0
arrow_downward

У меня была такая же проблема в одном из моих проектов: мы использовали Systemjs и решили переключиться на Webpack, поэтому он сломал наш System.import. Мы исправим это, заменив:

System.import(modulePath)
  .then(module => {
    // Do things
  })

С :

new Promise((resolve, reject) => {
    resolve(require(modulePath));
}).then((module) => { 
  // Do things 
});

Надеюсь это поможет

person Richard Casetta    schedule 07.10.2016
comment
Ричард Я не использую Webpack 2.0. Я использую их последнюю стабильную версию. - person jasan; 07.10.2016
comment
Разве системный импорт не только для webpack 2.0, require.ensure используется в более ранней версии webpack. - person jasan; 07.10.2016
comment
Да, это сломало наше приложение. Так что заменяем его эквивалентом с помощью промисов (второй код в моем комментарии) - person Richard Casetta; 07.10.2016
comment
Ричард. Можете ли вы опубликовать суть с примером, используя его с реагирующими маршрутами маршрутизатора. Неясно. - person jasan; 08.10.2016

arrow_upward
0
arrow_downward

я использую webpack 1.13.1 и вот мой конфиг

output: {
        path: PATHS.build,
        filename: '[name].[hash].js',
        publicPath:"/"
    },

вот код для получения компонента

const lazyLoadSomeComponent = () => {
  return {
      getComponent: (location, callback)=> {
        require.ensure([], require => {
          callback(null, require("./componentpath")["default"]);
        }, 'componentName');
      }
    }
};

Потом по маршруту

<Route path="somepath" {...lazyLoadSomeComponent()} />

Но что здесь происходит?

  • Сначала мы создаем функцию, которая вернет нам метод получения компонента.
  • Во-вторых, мы вызываем эту функцию в маршруте и выполняем ее, чтобы получить там метод компонента get, это упростит чтение маршрутов.
  • Последним в веб-пакете укажите общедоступный путь, поэтому «/» здесь разрешается из корня вашего сервера, вы также можете указать здесь свой домен.

Для дальнейшего улучшения мы можем загрузить несколько компонентов одновременно, используя метод ниже.

const LazyComponents = (pageName) => {
  return {
      getComponent: (location, callback)=> {
        require.ensure([], require => {
          switch(pageName){
            case 'Component1':
            callback(null, require("./components/component1")["default"]);
            break;
            case 'Component2' :
                callback(null, require( "./components/component2" )["default"]);
                    break ;

        }, "CombinedComponents");
      }
    }
};

Затем в Маршруты

<Route path="somepath" {...LazyComponents('Component1')} />
person abhirathore2006    schedule 12.10.2016