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()

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

（你可以在这里看到它也被称为延迟加载模块）

Webpack将React组件拆分为“0.js”“1.js”等

1 个答案: