ray-code-split
v3.0.0
Published
ray code split
Downloads
5
Readme
ray-code-split
use react-router@2
install
npm install --save ray-code-split
Usage
[email protected]
在 1.x 版本中,采用以下方式使用,支持 [email protected]
和 [email protected]
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} />;
[email protected]
在 2.x 版本中,采用以下方式使用,支持 [email protected]
和 [email protected]
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