Разделение кода Webpack с использованием реактивного маршрутизатора 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 

Я прочитал несколько учебников, но, кажется, это дело не так часто.

Answer 1

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

В своем коде, у вас есть что-то вроде этого:

// ... 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> 
); 

Теперь вы можете увидеть его, но вы «обманывая» Webpack, потому что, когда вы import CartContainer (в первых строках) , вы говорите «хорошо, этот кусок (главный) имеет CartContainer, пожалуйста, добавьте его в комплект». Затем, когда вы используете require.ensure, webpack уже знает, что эта зависимость загружена (она перешла на основной кусок), и не нужно разбить ее на другой кусок.

Вам просто нужно удалить первый импорт, так что webpack будет знать, что вы хотите CartContainer в отдельном куске! Просто имейте в виду, что, поскольку вы используете babel, вам нужно добавить .default, требуя этого дополнительного куска.

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