Question

我正在深入反应/接力，并希望确保我能够开始设置dev vs production。我们有一个大型应用程序，因此必须进行代码分割。

我更喜欢基于JSX的react-router路由声明，因此我很高兴从Implicit Code Splitting and Chunk Loading with React Router and Webpack遇到 Evan Henley 。

通过对正则表达式和ES6的一些调整，我能够让他的方法正常工作。克隆the repo，npm install && npm start，您将能够导航到不同的块（todos除外）。

^^^所有这些都适用于应用程序的非中继部分 - 好东西。

问题

然后......导航到Todos（基于中继）。

Uncaught TypeError: _TodoListFooter2.default.getFragment is not a function
viewer 
Fragment 
(instrumented buildRQL.Fragment) 
buildContainerFragment

我们的制作应用程序完全依赖于继电器。

中继取决于对getFragment等类的一些静态调用。在这种情况下，webpack已将TodoListFooter推送到不同的共享块中，因此TodoListFooter2没有getFragment。相比之下，它在同一行中断，_AddTodoMutation2是在同一个块中，因此类似的调用_AddTodoMutation2.default.getFragment('viewer')工作正常。

潜在解决方案

使用命名块？ This commit尝试这样做，但它仍然将一些代码推送到共享块中（并且因同样的错误而失败）
与静态方法中继兼容的不同代码分割方法？
我没想过的东西？

Answer 1

我能够发现，虽然Evan Henley的方法更好，但我需要稍微修改它以使其与Relay兼容（使用ES6 + import）。

这要求ES6导入中的显式bundle?lazy与中继兼容。 This commit显示了我发现的主要差异，使其与中继兼容。

首先，在Henley的代码中，它需要配置webpack加载器和导入，例如：

import Landing from './components/Landing'

相比之下，我的方法不需要在import中使用明确的bundle-loader延迟加载的额外webpack加载器配置：

import Landing from 'bundle?lazy!./components/Landing'

Henley的方法可以更轻松地导入路径文件。我的方法使它与Relay一起工作，并且通过import进行更明确的代码拆分，而无需通过正则表达式进行任何额外的webpack.config.js加载程序配置。

每个都很好，虽然我的方法是我发现让它与中继兼容的唯一方法。

实现：

type GetComponent = (location?: string, cb: GetComponentCB) => void

/**
 * Purpose: abbreviated expression so that we can read routes
 *
 * Background:
 *  - (failed) luqin/react-router-loader is awesome, but it is a Proxy and doesn't work with relay components.
 *    @see https://github.com/relay-tools/react-router-relay/issues/161
 *
 *  - (failed) webpack dynamic requires need a hard path root (the rest can be an expression)
 *    at compile time and a regex is created
 *    @see https://webpack.github.io/docs/html#dynamic-requires
 *    @see http://stackoverflow.com/a/37228426/2363935
 *
 *  - (succeeded ultimately) huge-app-splitting-refactor
 *    - uses bundle-loader, works with imports! and no path hardcoding!
 *    - approach doesn't work with Relay (quite as-is)
 *    - fixed approach with explicit bundle lazy imports!
 *    @see http://stackoverflow.com/a/37575707/2363935
 *    @see http://henleyedition.com/implicit-code-splitting-with-react-router-and-webpack/
 *    @see https://github.com/echenley/react-router-huge-apps-refactor
 *
 * @param component
 * @returns {function()}
 */
export function lazy (lazyModule: Function): GetComponent {
  if (!lazyModule) {
    throw new Error('lazy() did not find the given module.  Check to be sure your import path is correct, and make sure you are pointing at a file with a ****default export****.')
  }
  return (location, cb) => {
    lazyModule((module) => {
      cb(null, module.default)
    })
  }
}

用法：

/* eslint-disable flowtype/require-valid-file-annotation */
import OrganizationQueries from '../../queries/OrganizationQueries'
import React from 'react'
import {Route} from 'react-router'
import {lazy} from '../../config/routes'
import Organization from 'bundle-loader?lazy!./Organization'

// protected by parent route
export default (
  <Route>
    <Route path='/organization' getComponent={lazy(Organization)} queries={OrganizationQueries} />
  </Route>
)

Webpack代码分割使用中继的应用程序

问题

潜在解决方案

1 个答案: