React 路由懒加载的几种实现方案
2018-10-23 10:53
1341 查看
这篇文字简单的介绍了React在路由懒加载方面的几种实现方案。
传统的两种方式
import()
符合ECMAScript提议的import()语法,该提案与普通 import 语句或 require 函数的类似,但返回一个 Promise 对象。这意味着模块时异步加载的
webpack v2+ 使用
使用方式
function component() { return import( /* webpackChunkName: "lodash" */ 'lodash').then(_ => { var element = document.createElement('div'); element.innerHTML = _.join(['Hello', 'webpack'], ' '); return element; }).catch(error => 'An error occurred while loading the component'); } // 或者使用async async function getComponent() { var element = document.createElement('div'); const _ = await import(/* webpackChunkName: "lodash" */ 'lodash'); element.innerHTML = _.join(['Hello', 'webpack'], ' '); return element; }
require.ensure
webpack指定的使用方式
webpack v1 v2 指定使用方式
使用方式
require.ensure([], function(require){ var list = require('./list'); list.show(); ,'list'); <!-- Router --> const Foo = require.ensure([], () => { require("Foo"); }, err => { console.error("We failed to load chunk: " + err); }, "chunk-name"); //react-router2 or 3 <Route path="/foo" getComponent={Foo} />
lazyload-loader
相对于前两种,此种方式写法更为简洁。
使用方式
// webpack 配置文件中 使用lazyload-loader(必须将lazuyload-loader 放置在use的最右侧) module: { rules: [ { test: /\.(js|jsx)$/,, use: [ 'babel-loader', 'lazyload-loader' ] },
业务代码中
// 使用lazy! 前缀 代表需要懒加载的Router import Shop from 'lazy!./src/view/Shop'; // Router 正常使用 <Route path="/shop" component={Shop} />
原理 : https://github.com/rongchanghai/lazyload-loader
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- Web开发中 前端路由 实现的几种方式和适用场景
- 浅析Web开发中前端路由实现的几种方式
- WINCE应用的UI实现方案 —— 上篇:几种UI实现方案比较
- vue2路由异步加载(懒加载)的实现
- 路由模拟——设计方案的实现(1)
- Java开发中经常使用到的几种WebService技术实现方案
- angular通过路由实现跳转 resource加载数据
- Swift 3.0 延迟加载的几种实现方法
- vue+vue-router+vuex,利用vue-router2.2.0新增特性addRoutes实现路由动态加载,菜单动态加载,运用于后台管理系统,路由数据取自数据库
- react-router4 实现按需加载并利用withRouter传递props
- express for node 路由route几种实现方式的思考
- Android中apk加固完善篇之内存加载dex方案实现原理(不落地方式加载)
- 关于Map线程安全的几种实现方案
- webpack+react-router实现代码拆分按需加载(下)
- 前端路由实现与 react-router 源码分析
- 路由模拟——设计方案的实现(2)
- 通过LVS(直接路由方式)+Keepalived实现高可用负载均衡方案
- iOS多线程实现的几种方案
- Android中apk加固完善篇之内存加载dex方案实现原理(不落地方式加载)