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');
}

// 或者使用async

async 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');


const Foo = require.ensure([], () => {
    require("Foo");
}, err => {
    console.error("We failed to load chunk: " + err);
}, "chunk-name");

//react-router2 or 3

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 正常使用
  

感谢各位的阅读！关于React路由懒加载如何实现就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！