반응 라우터 jsx를 사용하는 웹팩 코드 분할

Question

내 경로가 jsx로 매핑됩니다. 내가 물건을 번들 webpack을 사용하고 경로에 따라 청크로 출력 js 파일을 분할하고 싶습니다.

나는 require.ensure를 시도했지만 webpack은 아무것도 분할하지 않았다. 결국에는 하나의 번들 파일 만 생성합니다. 내가 여기서 잘못하고있는 것이 확실하지 않습니다. 나는 루트가 사는 곳을 2 곳 유지하고 싶지 않습니다. 이상적으로 webpack은 이미 정의 된 경로를 사용합니다.

export const renderRoutes =() => (
    <Provider store={store}> 
    <Router history={history}> 
     <Route path='en' component={AppContainer}> 
     <Route path='cart' getComponent={(location, cb) => { 
     require.ensure([], (require) => { 
      cb(null, require('./Cart/CartContainer')); 
     }); 
     }}/> 
     <Route path='checkout'> 
      <Route path='shipping_address' component={ShippingAddressFormContainer} /> 
      <Route path='delivery_options' component={DeliveryOptionFormContainer} /> 
      <Route path='payment' component={PaymentContainer} /> 
      <Route path='review_order' component={ReviewOrderContainer} /> 
      <Route path='confirmation' component={ConfirmationContainer} /> 
     </Route> 
     </Route> 
    </Router> 
    </Provider> 
); 

render(
    renderRoutes(), 
    document.getElementById('react-root') 
); 

gruntfile 설정 :

dev: { 
     entry: [ 
      './<%= paths.src %>/javascripts/react/containers/Root' 
     ], 
     output: { 
      path: path.join(__dirname, '<%= paths.dist %>/javascripts'), 
      filename: 'bundle.js', 
      chunkFilename: '[id].chunk.js', 
      publicPath: '/en/' 
     }, 
     devtool: 'cheap-module-source-map', 
     plugins: [ 
      new webpack.optimize.CommonsChunkPlugin('bundle.js'), 
      new webpack.optimize.OccurrenceOrderPlugin(), // Chunk ids by occurrence count. Ids that are used often get lower (shorter) ids. 
      new webpack.DefinePlugin({ 
      'process.env': { 
       'NODE_ENV': JSON.stringify('development') 
      } 
      }) 
     ], 
     module: { 
      preLoaders: [ 
      { 
       test: /\.json$/, 
       loader: 'json' 
      }, 
      ], 
      loaders: [ 
      { 
       test: /\.js$/, 
       loaders: ['babel'], 
       exclude: /node_modules/, 
       include: __dirname 
      } 
      ] 
     } 
     }, 

dev에 작업 출력

 Asset  Size Chunks    Chunk Names 
    bundle.js 2.76 MB 0, 1, 0 [emitted] bundle.js, main 
bundle.js.map 3.17 MB 0, 1, 0 [emitted] bundle.js, main 

나는 몇 자습서를 읽을 수 있지만,이 경우는 너무 일반적이지 보인다. 때문에 때 (첫 번째 라인)을 import CartContainer,

// ... Some imports here 
import CartContainer from './Cart/CartContainer'; 
// ... More imports here 

export const renderRoutes =() => (
    <Provider store={store}> 
     <Router history={history}> 
      // Some other routes here 
      <Route path='cart' getComponent={(location, cb) => { 
       require.ensure([], (require) => { 
        cb(null, require('./Cart/Container').default); 
       }); 
      }} /> 
     </Router> 
    </Provider> 
); 

지금 당신이 그것을 볼 수 있지만 웹팩를 "속여"야 : 당신의 코드에서

Answer 1

I talked to OP in chat, he showed me his entire code and I figured it out!

, 당신은 그런 일이 , 당신은 "ok,이 덩어리 (메인)는 CartContainer을 가지고 있습니다. 번들에 추가하십시오"라고 말하고있는 것입니다. 그런 다음 require.ensure을 사용하면 webpack은이 종속성이로드되었음을 이미 알고 있으므로 (메인 청크로 갔다) 다른 분할로 분할 할 필요가 없습니다.

첫 번째 가져 오기를 제거하기 만하면 webpack은 CartContainer을 별도의 청크에 넣으 려한다는 사실을 알게됩니다! babel을 사용하고 있으므로이 여분의 청크가 필요할 때 .default을 추가해야합니다.

희망이 있습니다.