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

时间:2021-05-26

这篇文字简单的介绍了React在路由懒加载方面的几种实现方案。

传统的两种方式

import()

符合ECMAScript提议的import()语法,该提案与普通 import 语句或 require 函数的类似,但返回一个 Promise 对象。这意味着模块时异步加载的

webpack v2+ 使用

使用方式

function component() { return import( '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( '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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章