2

私のルートはjsxでマッピングされています。私は webpack を使用してバンドルし、ルートに従って出力 js ファイルをチャンクに分割したいと考えています。

require.ensure を試しましたが、webpack は何も分割しません。最後に、バンドル ファイルを 1 つだけ生成します。ここで何が間違っているのかわかりません。ルートが存在する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 に答える