react-router 4.x 路由按需加载

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

react-router 4.x 路由按需加载的相关文章

【实例分解二】angularjs根据路由按需加载Controller

开始笔记之前,把早上检测到的angularjs中的命名问题做一下记录. 检测工具:google浏览器扩展工具angularJS,结果如下: angularjs中,module要遵守lowerCamelCase原则,例:"myApp"; controller要遵守UpperCamelCase原则并且要以Controller结尾,例:"MainController". 这一篇笔记主要对angularjs根据路由按需加载Controller的操作进行了说明,也就是上一篇中

vue中路由按需加载的几种方式

使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import Boy from '@/components/Boy' import Girl from '@/components/Girl' 普通加载的缺点: webpack在打包的时候会把整个路由打包成一个js文件,如果页面一多,会导致这个文件非常大,加载缓慢 1.require.ensure()实现按需加载

vue学习指南:第十二篇(详细) - Vue的 路由 第二篇 ( 路由按需加载(懒加载))

各位朋友 因 最近工作繁忙,小编停更了一段时间,快过年了,小编祝愿 大家 事业有成 学业有成 快乐健康 2020开心过好每一天.从今天开始 我会抽时间把 Vue 的知识点补充完整,以及后期会带给大家更完善的知识体系!!! 路由的按需加载(懒加载) 我们都知道 vue的路由是我们必学的,也是不可分离的一部分,我们传统引入路由的方式是这样的, import Home from '@/components/home/Home' 但是在真正项目的开发中,这种现象是杜绝的,是不建议使用这种传统方式引入的.

vue项目实现路由按需加载(路由懒加载)的3种方式

为什么需要懒加载? 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时 vue异步组件es提案的import()webpack的require,ensure()1 . vue异步组件技术 ==== 异步加载 vue-router配置路由 , 使用

react 中使用import()实现按需加载报错 解决方法 --‘import’ and ‘export’ may only appear at the top level

因为项目需要搞一下按需加载,使用import实现代码打包分片按需加载,但是在实际使用中报语法错误.报错信息如下 SyntaxError: 'import' and 'export' may only appear at the top level 啊咧?报错了. 查找发现很多人碰到过,解决方法不同,但是我这个报错适用下边这个方法. npm install --save-dev babel-plugin-syntax-dynamic-import 然后调整babel-loader配置如下: use

vue项目实现路由按需加载的3种方式

vue异步组件技术 ==== 异步加载vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件 /* vue异步组件技术 */ { path: '/home', name: 'home', component: resolve => require(['@/components/home'],resolve) },{ path: '/index', name: 'Index', component: resolve => re

React Router 按需加载+服务器渲染的闪屏问题

伴随着React协议的『妥协』(v16采用MIT),React为项目的主体,这个在短期内是不会改变的了,在平时使用过程中发现了如下这个问题: 在服务器渲染的时候,刷新页面会出现闪屏的现象(白屏一闪而过) 作为努力最求极致的我,是不能容忍的,而这一现象是半道出现的,也就是在添加按需加载之后.要说清楚这个问题,得从React的服务器渲染开始说起,(急于寻求问题解决方案的,可以直接去文章后半部分) 服务器渲染(SSR)基础原理 React的虚拟DOM是其可被用于服务端渲染的关键.其原理简单的来说就是首

利用 React/Redux/React-Router 4/webpack 开发大型 web 项目时如何按需加载

如何设计一个大型 web 项目? React + webpack 如何按需加载? React + React-Router 4 + webpack 如何按需加载? React + Redux + React-Router 4 + webpack 如何按需加载? 实录提要: bundle-loader 和 Webpack 内置的 import() 有什么区别? 按需加载能否支持通过请求后台数据,动态配置页面的的应用场景? 参与过几个 React 项目,被依赖包搞的晕晕的,不知道该怎么选择? 什么包

react-route4 按需加载配置心得

本篇文章主要记录笔者项目中使用 react-route + webpack 做路由按需加载的心得,可能只有笔者一个人看,权当日记了. 很久很久以前,react-route还是2.X和3.X版本的时候,我们是这样做按需的: const routes = { path: '/', component: AppCom, indexRoute: { component: Admin }, childRoutes: [ { path: 'edit/:id', getComponent: (nextStat