本篇文章给大家带来的内容是关于react路由懒加载实现的另种方案（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
这篇文字简单的介绍了react在路由懒加载方面的几种实现方案。
传统的两种方式
import()
符合ecmascript提议的import()语法，该提案与普通 import 语句或 require 函数的类似，但返回一个 promise 对象。这意味着模块时异步加载的
webpack v2+ 使用
使用方式
function component() {  return import( /* webpackchunkname: lodash */ 'lodash').then(_ => {    var element = document.createelement('p');    element.innerhtml = _.join(['hello', 'webpack'], ' ');    return element;  }).catch(error => 'an error occurred while loading the component');}// 或者使用asyncasync function getcomponent() {  var element = document.createelement('p');  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/rongchangh...
以上就是react路由懒加载实现的另种方案（代码）的详细内容。