铁雪资源网 Design By www.gsvan.com
这篇文字简单的介绍了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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
React,路由懒加载
铁雪资源网 Design By www.gsvan.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无React 路由懒加载的几种实现方案的评论...