react路由懒加载的方式

我就使用个路由懒加载，百度一些全是以下的方法，这些方法要是没有用过，肯定懵逼啊，

请问这些方法就不能给个demo，显示具体使用方式？这让小白们情何以堪

传统的两种方式

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} />
//欢迎加入全栈开发交流群一起学习交流：864305860

azyload-loader

相对于前两种，此种方式写法更为简洁。

React 路由懒加载

使用方式

// 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} />

有知道最后一个怎么用的告诉我一下，而我用的是这种方式的

// 懒加载
const Topics = LoadAsync(() => import('./components/pages/topics' /* webpackChunkName: "topics" */))
const API = LoadAsync(() => import('./components/pages/API'))
const Getstart = LoadAsync(() => import('./components/pages/getstart'))
const About = LoadAsync(() => import('./components/pages/about'))

如图：点击导航加载相应的文件