Webpack將React組件拆分爲「0.js」「1.js」等。etc

Question

我無法重新創建將React組件拆分爲單獨的文件，例如0.js,1.js,2.js等，用於代碼拆分並減少bundle.js文件。有人碰巧知道如何產生這個結果嗎？我試圖用ChunkManifest和webpack-manifest插件重新創建它，但它不會這樣做。任何建議都會很棒！

routes.js

function errorLoading(err) { 
    console.error('Dynamic page loading failed', err); 
} 

function loadRoute(cb) { 
    return (module) => cb(null, module.default); 
} 

export default [ 
    { 
    path: '/', 
    component: App, 
    childRoutes: [ 
     { 
     path: 'signup', 
     getComponent(location, cb) { 
      System.import('./modules/App/components/Authentication/Login.js') 
      .then(loadRoute(cb)) 
      .catch(errorLoading); 
     } 
     }, 
     { 
     path: 'verify', 
     getComponent(location, cb) { 
      System.import('./modules/App/components/Authentication/Verify.js') 
      .then(loadRoute(cb)) 
      .catch(errorLoading); 
     } 
     }, 
     { 
     path: 'password-reset', 
     getComponent(location, cb) { 
      System.import('./modules/App/components/Authentication/PasswordReset.js') 
      .then(loadRoute(cb)) 
      .catch(errorLoading); 
     } 
     }, 
     { 
     path: 'new-password', 
     getComponent(location, cb) { 
      System.import('./modules/App/components/Authentication/NewPassword.js') 
      .then(loadRoute(cb)) 
      .catch(errorLoading); 
     } 
     } 
    ] 
    } 
] 

Answer 1

種類的碼分裂是在幾個方面來實現：

• require.ensure()
• System.import（這將在V3的WebPack被棄用）
• import()

這裏是我們的新文檔頁面的鏈接，它指定了一些代碼分割與反應的例子。 https://webpack.js.org/guides/lazy-load-react/

（你可以在這裏看到它也被稱爲懶加載模塊）