ray-code-split

use react-router@2

install

npm install --save ray-code-split

Usage

version@1.x

在 1.x 版本中，采用以下方式使用，支持 webpack@3.x 和 babel@6.x

Basic (推荐)

import AsyncLoader from 'ray-code-split';

import Login from './Login';

const Home = () => <AsyncLoader load={import('./Home')} />;
const Page2 = props => <AsyncLoader load={import('./page2')} componentProps={props}/>;

const App = () => (
  <Router>
    <Route path="/" component={Home}>
      <Route path="/login" component={Login} />
      <Route path="/page2" component={Page2} />
    </Route>
  </Router>
)

// 或

const routes = [
  { path: 'home', component: Home },
  { path: 'login', component: Login },
  { path: 'page2', component: Page2 },
];

<Router history={hashHistory} routes={routes} />

use route

import useRouter from 'ray-code-split/lib/useRouter';

import Page1 from './page1';
import Page2 from './page2';
import Page3 from './page3';

const demoRoutes = [
  { path: 'page1', component: Page1 },
  { path: 'page2', component: Page2 },
  { path: 'page3', component: Page3 },
];

const asyncRouts = useRouter(demoRoutes);

export default {
  path: '/',
  // onEnter: onEnterValidate,
  indexRedirect: LoginRoot,
  indexRoute: {
    onEnter(nextState, replace) {
      replace('/login');
    }
  },
  childRoutes: asyncRouts
};

use hoc

import enhanceAsync from 'ray-code-split/lib/enhanceAsync';

import Login from './Login';

const Home = enhanceAsync(import('./Home'));
const Page2 = enhanceAsync(import('./page2'));

const App = () => (
  <Router>
    <Route path="/" component={Home}>
      <Route path="/login" component={Login} />
      <Route path="/page2" component={Page2} />
    </Route>
  </Router>
)

// 或

const routes = [
  { path: 'home', component: Home },
  { path: 'login', component: Login },
  { path: 'page2', component: Page2 },
];

<Router history={hashHistory} routes={routes} />

注意

采用 AsyncLoader 时，最好将所有的 props均注入到组件，即采用以下方式：

如果组件为router container组件，不能省略 componentProps，不传递 componentProps将无法传递 react-router children

const RootView = props => <AsyncLoader load={import('./RootView')} componentProps={props} />;

version@2.x

在 2.x 版本中，采用以下方式使用，支持 webpack@4.x 和 babel@7.x

single use in browser

import lazyLoad from 'ray-code-split/lib/lazyLoad';
// or
// import lazyLoad from 'ray-code-split/lib/simpleLazy';

import Login from './Login';

const Home = lazyLoad(() => import('./Home'));
const Page2 = lazyLoad(() => import('./Page2'));

function AsyncHome(){
  return (
    <div>
      <Home />
    </div>
  );
}
function AsyncPage2(){
  return (
    <div>
      <Page2 />
    </div>
  );
}

const App = () => (
  <Router>
    <Route path="/" component={AsyncHome}>
      <Route path="/login" component={Login} />
      <Route path="/page2" component={AsyncPage2} />
    </Route>
  </Router>
)

use lazy (since v3.0.0)，支持 webpack5.x 及 babel7.x

import { lazy } from 'ray-code-split';

import Login from './Login';

const Home = lazy(() => import('./Home'));
const Page2 = lazy(() => import('./Page2'));

const App = () => (
  <Router>
    <Route path="/" component={Home}>
      <Route path="/login" component={Login} />
      <Route path="/page2" component={Page2} />
    </Route>
  </Router>
)

License

MIT