React 路由懒加载的几种实现方案

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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;

}

2

3

4

5

6

7

8

9

10

11

12

13

14

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

2

3

4

5

6

7

8

9

10

11

// webpack 配置文件中 使用lazyload-loader（必须将lazuyload-loader 放置在use的最右侧）

module: {

  rules: [

   {

    test: /\.(js|jsx)$/,,

    use: [

     ‘babel-loader‘,

     ‘lazyload-loader‘

    ]

   },

2

3

4

5

6

// 使用lazy! 前缀 代表需要懒加载的Router

import Shop from ‘lazy!./src/view/Shop‘;

// Router 正常使用

<Route path="/shop" component={Shop} />