這篇文章帶給大家的內容是關於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');
<!-- 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/rongchangh...
以上是React路由懶載入實作的另一種方案（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
