각 모듈을 개별적으로 개발할 수 있도록 응용 프로그램 모듈을 분리하려고합니다. 나는 React, Redux, React Router를 사용하는데 여기서 라우팅이 중요한 역할을한다고 생각한다. 또한 응용 프로그램의 SPA (페이지 재로드 없음) 기능을 유지하려고합니다. 다른 html 파일을 사용해야합니까? 내 원본 JS 파일을 따로 묶을 수 있습니까? 내 생각이 광범위Decoupling Modules in React
그래서 최상의 솔루션을 좁힐합니다.
위의 구조를 사용하면 내 단일 소스 JS 파일의 파일 크기가 커질 까봐 걱정됩니다. 큰 번들 파일을 처리하는
한 가지 가능한 방법은 code splitting에 대한 응용 프로그램을 웹팩을 사용하십시오 kyt-starter-universal 저장소는 예를 가지고
https://gist.github.com/sokra/27b24881210b56bbaff7#code-splitting-with-es6
: 웹팩이 아니라으로
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>
);
보통 모듈을 가져 오면, System.import은 webpack에게 그 모듈과 그 의존성을위한 별도의 청크를 생성하도록 알려줍니다. 웹팩을 사용하는 것이 가장 좋은 건 여기입니다 @DTing 동의와
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/
매우 많은 : 웹팩 1도 require.ensure
더 많은 독서를 사용하여 코드 분할있다. Webpack에는 n 개의 모듈을 m 번들로 분할하는 방법을 이해하는 최적화 프로그램이 포함되어 있습니다. 메인 번들과 함께 각 청크에 대해 별도의 js 파일을 생성하고 require를 호출 할 때로드합니다. 여기서 체질 understading 나를 위해 도움이되었다
몇 자원 ..
A) automatic-code-splitting-for-react-router-w-es6-imports
B) Discussions on setting up code splitting in Webpack and React Router