Развязывающие модули в реакторе

Question

Я хочу отделить модули приложений так, чтобы каждый модуль мог разрабатываться индивидуально. Я использую React, Redux и React Router, и я считаю, что здесь важна роль маршрутизации. Я также хочу сохранить функцию SPA (без перезагрузки страницы) приложения. Должен ли я иметь разные html-файлы? Могу ли я объединить мои исходные JS-файлы отдельно?

Мои мысли широки, поэтому я хочу, чтобы сузить ее до лучших возможных решений.

С нынешней структурой, которую я выше, Im беспокоится, что у моих одиночных JS-файлов будет огромный размер файла.

Answer 1

Одним из возможных подходов для решения больших пучков файлов использовать Webpack для code splitting приложения:

https://gist.github.com/sokra/27b24881210b56bbaff7#code-splitting-with-es6

kyt-starter-universal хранилище имеет пример:

const importHome = (nextState, cb) => { 
    System.import('../components/Home') 
    .then(module => cb(null, module.default)) 
    .catch((e) => { throw e; }); 
}; 

... 

const routes = (
    <Route path="/" component={App}> 
    <IndexRoute getComponent={importHome} /> 
    ... 
    </Route> 
); 

С WebPack 2, а не импортируя модули нормально, System.import позволит webpack знать, чтобы создать отдельный блок для этого модуля и его зависимостей. Webpack 1 также имеет кодовое разделение с помощью require.ensure

Больше чтение:

http://moduscreate.com/code-splitting-for-react-router-with-es6-imports/
https://medium.com/@puppybits/webpack-code-splitting-by-routes-92f96cf733f2#.v1mxmc3ty
http://jonathancreamer.com/advanced-webpack-part-2-code-splitting/
http://blog.netgusto.com/asynchronous-reactjs-component-loading-with-webpack/

Answer 2

Очень много с @DTing согласен, что использование Webpack является лучшим выбором здесь. Webpack включает оптимизатор, который понимает, как разделить n модулей на m пакетов. Он генерирует отдельные файлы js для каждого фрагмента вместе с основным пакетом и загружает их, когда вы требуете.

Немного больше ресурсов, что было полезно для меня understading основы здесь ..

A) automatic-code-splitting-for-react-router-w-es6-imports

B) Discussions on setting up code splitting in Webpack and React Router

C) On why the JS bundle for the Vector.im web app is too big, and ways it could potentially be improved using code splitting and app structure changes. A good example of ways to improve bundle sizes

D) getting-started-with-webpack-2