2

我的路线是用 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')
);

咕噜文件配置：

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

我阅读了一些教程，但似乎这种情况并不常见。

4

1 回答 1

2

我在聊天中与 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>
);

现在您可能会看到它，但您是在“欺骗”webpack，因为当您import CartContainer（在第一行中）时，您会说“好的，这个块（主要）有CartContainer，请把它添加到包中”。然后，当您使用 时require.ensure，webpack 已经知道该依赖项已加载（它进入主块）并且不需要将其拆分为不同的块。

你只需要删除第一个导入，webpack 就会知道你想要CartContainer一个单独的块！请注意，由于您使用的是，因此在需要此额外块时需要babel添加。.default

希望能帮助到你！

于 2016-11-14T16:41:29.490 回答