這篇文字簡單的介紹了React在路由懶加載方面的幾種實現方案。

傳統的兩種方式

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');}// 或者使用asyncasync 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} />

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/rongchanghai/lazyload-loader

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。