React ----- 路由懶加載的幾種實現方案

傳統的兩種方式

1.import()

符合ECMAScript提議的import()語法，該提案與普通 import 語句或 require 函數的類似，但返回一個 Promise 對象。這意味着模塊時異步加載的

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

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 正常使用
<Route path="/shop" component={Shop} />