react路由按需加载方法

使用router4之后以前的按需加载方法require.ensure 是不好使了。

所以我们改用react-loadable插件做按需加载。

第一步：

yarn add react-loadable --save-dev

第二步

创建一个 loadable文件代码如下：

import React from 'react';
import Loadable from 'react-loadable';export default function withLoadable (comp) {return Loadable({loader:comp,loading:()=>null,delay:0})
}

路由这样写

import Bundle from './loadable';
const WrappedNormalLoginForm= Bundle(()=>import('./doLogin/dologin'));···<Route exact path="/" component={WrappedNormalLoginForm}/>
···

有不对的地方请多多指正　

转载于:https://www.cnblogs.com/wenbodeboke/p/9883666.html

react路由按需加载方法相关推荐

React Native按需加载手Q狼人杀探索之路
本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/mUzq4NaBHeF3T-NStLzuRw 作者:pe ...
React Native 按需加载手Q狼人杀探索之路
导语:最近特别火的狼人杀和最近特别火的React Native会擦出什么样的火花呢?本文和您一同探讨RN性能优化的现实场景. 项目简介: 狼人杀游戏是多人实时性游戏,对流畅度等性能都有要求.作为大型游 ...
vue项目实现路由按需加载(路由懒加载)的3种方式
vue项目实现路由按需加载(路由懒加载)的3种方式 1.vue异步组件 2.es提案的import() 3.webpack的require,ensur *1.vue异步组件技术 ==== 异步加载 v ...
vue 路由按需加载
在vue项目中,一般引入组件都是用import import 组件名 from '组件路径' webpack在npm run build的时候会打包成一个整个的js文件,如果页面一多,会导致这个文件非 ...
vue中路由按需加载的几种方式
使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import ...
快速搭建react项目骨架（按需加载、redux、axios、项目级目录等等）
一.前言最近整理了一下项目骨架,顺便自定义了一个脚手架,方便日后使用.我会从头开始,步骤一步步写明白,如果还有不清楚的可以评论区留言.先大致介绍一下这个骨架,我们采用 create-react-ap ...
vue-router 路由的懒加载原理及方式
当打包构建应用时,JavaScript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 结合 Vue 的异步组 ...
react 动态路嵌套动子路由_react 路由动态加载组件，实现按需加载
默认情况下,当在项目根路径下执行npm run build时,create-react- app内部使用webpack将src/路径下的所有代码打包成一个JS文件和一个 CSS文件. 当项目代码量不多 ...
React单页如何规划路由、设计Store、划分模块、按需加载
本项目地址:react-coat-helloworld react-coat 同时支持浏览器渲染(SPA)和服务器渲染(SSR),本 Demo 仅演示浏览器渲染,请先了解一下:react-coat 第 ...

react路由按需加载方法

react路由按需加载方法相关推荐

最新文章

热门文章