react-router 4 代码分割(按需加载) 官方文档 https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html
1.未采用路由按需加载的代码
import React from ‘react‘; import ReactDOM from ‘react-dom‘; import { Route , BrowserRouter, Switch } from ‘react-router-dom‘; import {Provider} from ‘react-redux‘; import ‘./config/rem.js‘; import registerServiceWorker from ‘./registerServiceWorker‘; import Loadable from ‘react-loadable‘; import {store} from ‘./redux/store/store‘; import ‘./style/common.scss‘; import Home from ‘./page/home/‘; import Welcome from ‘./page/welcome/‘; import Login from ‘./page/login/‘; import Store from ‘./page/store/‘; import User from ‘./page/user/‘; import Error from ‘./page/error‘; const routes = [ { path: ‘/‘, component: Home, exact: true }, { path: ‘/login‘, component: Login }, { path: ‘/welcome‘, component: Welcome }, { path: ‘/store‘, component: Store }, { path: ‘/user‘, component: User } ] ReactDOM.render( <Provider store={store}> <BrowserRouter> <div className="router-page"> <Switch> { routes.map(route => ( <Route key={route.path} path={route.path} component={route.component} exact={route.exact} /> )) } <Route component={ Error } /> </Switch> </div> </BrowserRouter> </Provider>, document.getElementById(‘root‘) ); registerServiceWorker();
2.采用 react-loadable 来实现路由按需加载
cnpm install --save react-loadable
import React from ‘react‘; import ReactDOM from ‘react-dom‘; import { Route , BrowserRouter, Switch } from ‘react-router-dom‘; import {Provider} from ‘react-redux‘; import ‘./config/rem.js‘; import registerServiceWorker from ‘./registerServiceWorker‘; import Loadable from ‘react-loadable‘; import {store} from ‘./redux/store/store‘; import ‘./style/common.scss‘; const MyLoadingComponent = ({ isLoading, error }) => { if (isLoading) { return <div>Loading...</div> } else if (error) { return <div>Sorry, there was a problem loading the page.</div> } else { return null; } }; const AsyncHome = Loadable({ loader: () => import(‘./page/home/‘), loading: MyLoadingComponent }); const AsyncWelcome = Loadable({ loader: () => import(‘./page/welcome/‘), loading: MyLoadingComponent }); const AsyncLogin = Loadable({ loader: () => import(‘./page/login/‘), loading: MyLoadingComponent }); const AsyncStore = Loadable({ loader: () => import(‘./page/store/‘), loading: MyLoadingComponent }); const AsyncUser = Loadable({ loader: () => import(‘./page/user/‘), loading: MyLoadingComponent }); const AsyncCheckAuth = Loadable({ loader: () => import(‘./page/checkAuth/‘), loading: MyLoadingComponent }); const AsyncError= Loadable({ loader: () => import(‘./page/error‘), loading: MyLoadingComponent }); const routes = [ { path: ‘/‘, component: AsyncHome, exact: true }, { path: ‘/login‘, component: AsyncLogin }, { path: ‘/welcome‘, component: AsyncWelcome }, { path: ‘/store‘, component: AsyncStore }, { path: ‘/user‘, component: AsyncUser } ] ReactDOM.render( <Provider store={store}> <BrowserRouter> <div className="router-page"> <Switch> { routes.map(route => ( <Route key={route.path} path={route.path} component={route.component} exact={route.exact} /> )) } <Route component={ Error } /> </Switch> </div> </BrowserRouter> </Provider>, document.getElementById(‘root‘) ); registerServiceWorker();
ok,以上就能轻松实现路由的按需加载
原文地址:https://www.cnblogs.com/zhuzeliang/p/9110400.html
时间: 2024-11-02 16:00:09