ウェブパック "0.js" "1.js"などに反応成分を分割する

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（これはWebPACKのv3では廃止される予定）
• import()

ここに、私たちの新しいドキュメントページのリンクがあります。これは、反応を伴うコード分割の例を示しています。 https://webpack.js.org/guides/lazy-load-react/

（あなたがここで見ることができ、それはまたのように遅延ロード・モジュールと呼ばれる）