使用react-router的Webpack代碼拆分jsx

我的路由使用jsx進行映射。我使用webpack捆綁東西，我想根據路線將輸出js文件分成塊。使用react-router的Webpack代碼拆分jsx

我試過require.ensure，但webpack沒有分割任何東西。最後它只會生成一個包文件。我不確定我在這裏做錯了什麼。我不想保留兩個路線所在的地方。理想情況下，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

我讀了一些教程，但似乎這種情況下是不那麼常見。

來源

2016-11-14 Stefanie

您的代碼似乎正確無誤，請更新您的問題並提供更多信息。就像有錯誤一樣。什麼是構建步驟。你有沒有檢查你的生成文件夾？我問這是因爲我試圖複製，我能夠實現你想要的。 –

感謝您的光臨！我沒有收到任何更新的代碼錯誤。你認爲我應該在所有路線上使用require.ensure嗎？我希望在購物車路徑上執行require.ensure時，它至少會分塊一次。 – Stefanie

太奇怪了。還有一個問題，是'./<%= paths.src％>/javascripts/react/containers/Root'你的「主」文件？順便說一句，你可以只分割你想要/需要的路線，在我的測試中，它只產生一個路線，只有一條路線。 –

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。

希望它有幫助！

來源

2016-11-14 16:41:29

就是這樣！感謝你的堅持和幫助！ – Stefanie

使用react-router的Webpack代碼拆分jsx

回答

相關問題