reactjs - Webpack 将 React 组件拆分为 "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 中弃用)
• 导入()

这是我们新文档页面的链接，其中指定了一些使用 React 进行代码分割的示例。 https://webpack.js.org/guides/lazy-load-react/

(您可以在这里看到它也称为延迟加载模块)