Разделение кода в 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
            }
          ]
        }
      },

вывод задачи разработчика

        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

Я разговаривал с OP в чате, он показал мне весь свой код, и я понял это!

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

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

Теперь вы можете видеть это, но вы "обманываете" веб-пакет, потому что, когда вы import CartContainer (в первых строках), вы говорите "хорошо, этот кусок (основной) имеет CartContainerПожалуйста, добавьте его в комплект ". Тогда, когда вы используете require.ensureWebpack уже знает, что эта зависимость загружена (она перешла к основному чанку), и ему не нужно разбивать ее на другой чанк.

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

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