react-router4.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，以上就能轻松实现路由的按需加载

react-router4.x(代码片段)

...同的组件。1，创建项目首先使用命令 npxcreate-react-appreact-router创建项目，然后npminstall下载相关依赖，再按照之前的文件目录整理src文件夹，最后再components文件夹下面新建两个组件Home.js和News.js。 2，安装和引入路由安装... 查看详情

react-router4按需加载的4种实现

...，其中有些不需要用到bundle-loader 第一种：ReactTraining/react-router介绍的基于 webpack, babel-plugin-syntax-dynamic-import,和 react-loadable.主要是利用了react-loadable这个高级组件，他是专门用来异步加载（也 查看详情

vue路由的懒加载和组件的按需加载方法(代码片段)

//aview:function(resolve)//require(["./a.vue"],resolve);//,//bview:function(resolve)//require(["./b.vue"],resolve);//aview:require("./a.vue"),bview:require("./b.vue"), “懒加载也叫延迟加载，即在需要的时候进行加载， 查看详情

vue中路由按需加载的几种方式(代码片段)

...目后，我们会在Router文件夹下面的index.js里面引入相关的路由组件,如：importHellofrom‘@/components/Hello‘importBoyfrom‘@/components/Boy‘importGirlfrom‘@/components/Girl‘普通加载的缺点：webpack在打包的时候会把整个路由打包成一个js文件，如... 查看详情

vue项目实现路由按需加载的3种方式(代码片段)

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

react-router4.x中文文档(代码片段)

以下为翻译的中文API（水平有限，凑合看，欢迎纠正补充~） <BrowserRouter>使用HTML5历史记录API（pushState，replaceState和popstate事件）的<Router>来保持您的UI与URL同步。Code:`importBrowserRouterfrom‘react-router-dom‘<BrowserRouter 查看详情

vue学习指南：第十二篇(详细)-vue的路由第二篇(路由按需加载(懒加载))(代码片段)

...完整，以及后期会带给大家更完善的知识体系！！！　　路由的按需加载(懒加载)　　我们都知道vue的路由是我们必学的，也是不可分离的一部分，我们传统引入路由的方式是这样的，　importHomefrom‘@/components/home/Home‘但是在真... 查看详情

vue按需加载(代码片段)

...)、webpack的require.ensure() 1.vue异步组件技术vue-router配置路由，使用vue的异步组件技术，可以实现按需加载。但是，这种情况下一个组件生成一个js文件。代码如下：path:‘/demo‘,name:‘Demo‘,component:resolve=>require([ 查看详情

vue按需加载组件-webpackrequire.ensure

...个整体,打包位置是dist/static/js/app.[contenthash].js类似下面的路由代码router/index.js路由相关信息,该路由文件引入了多个.vue组件importHellofrom‘@/components/Hello‘importProvincefrom‘@/compo 查看详情

使用reactdva按需加载(代码片段)

然后子路由组件会报错。Add"publicPath":"/"to.webpackrcor.roadhogrccanfixthisissueexportdefaultfunctionRouterConfig(history,app)constLoginPage=(dynamicasany)(app,component:()=>import(‘./routes/LoginPage/LoginPage‘))constHomePage=(dynamicasany)(app,component:()=>import(‘./routes/... 查看详情

react-router4.x

react-router的4.X版本的方法引入和网上常见教程有了一些区别，建议最好看官网文档Link的引入　　import{Link}from‘react-router-dom‘<Linkto="/about">About</Link>Router的引入　import{Router}from‘react-router‘importcreateBrowserHistoryfr 查看详情

（通用 React + redux + react-router）如何避免在初始浏览器加载时重新获取路由数据？

】（通用React+redux+react-router）如何避免在初始浏览器加载时重新获取路由数据？【英文标题】：(UniversalReact+redux+react-router)Howtoavoidre-fetchingroutedataoninitialbrowserload?【发布时间】：2016-07-1320:36:42【问题描述】：我在我的Route组件上... 查看详情

vue-router路由懒加载(代码片段)

路由懒加载指的是打包部署时将资源按照对应的页面进行划分，需要的时候加载对应的页面资源，而不是把所有的页面资源打包部署到一块。避免不必要资源加载。（参考vue项目实现路由按需加载(路由懒加载)的3种方... 查看详情

路由组件按需加载的几种方法

...目后，我们会在Router文件夹下面的index.js里面引入相关的路由组件,如：importHellofrom‘@/components/Hello‘importBoyfrom‘@/components/Boy‘importGirlfrom‘@/components/Girl‘　　这样做的结果就是webpack在npmrunbuild的时候会打包成 查看详情

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

...quire,ensure()1.vue异步组件技术====异步加载 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件/*vue异步组件技术*/path:‘/home‘,name:‘home‘,component:resolve=>require([‘@/componen... 查看详情

vue组件按需引用，vue-router懒加载，vue打包优化，加载动画

...script包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。结合Vue的 异步组件 和Webpack的 codesplittingfeature,轻松实现... 查看详情

react-router路由3.x版本用法(代码片段)

...rtReact,Componentfrom"react"2importRouter,Route,hashHistory,IndexRoutefrom"react-router"3importIndexfrom"../component/Page/Router1/Index"4importLoginfrom"../component/Page/Router1/Login"5importDetailfrom"../component/Page/Router1/Detail"6importBookfrom"../component/Page/Router2/Book"7importArtfrom".... 查看详情

vue路由懒加载(代码片段)

1、vue异步组件技术——异步加载vue-router配置路由，使用vue的异步组件技术，可以实现按需加载。此时，一个组件将生成一个js文件。/*vue异步组件技术*/path:'/home',name:'home',component:resolve=>require(['@... 查看详情