React 路由懒加载的几种实现方案
Posted xanthedsf
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React 路由懒加载的几种实现方案相关的知识，希望对你有一定的参考价值。
这篇文字简单的介绍了React在路由懒加载方面的几种实现方案。
传统的两种方式
import()
符合ECMAScript提议的import()语法，该提案与普通 import 语句或 require 函数的类似，但返回一个 Promise 对象。这意味着模块时异步加载的
webpack v2+ 使用
使用方式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
function component() { return import( /* webpackChunkName: "lodash" */ ‘lodash‘).then(_ => { var element = document.createElement(‘div‘); 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 指定使用方式
使用方式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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
相对于前两种，此种方式写法更为简洁。
使用方式
|
1
2
3
4
5
6
7
8
9
10
11
|
// webpack 配置文件中 使用lazyload-loader（必须将lazuyload-loader 放置在use的最右侧）module: { rules: [ { test: /.(js|jsx)$/,, use: [ ‘babel-loader‘, ‘lazyload-loader‘ ] }, |
业务代码中
|
1
2
3
4
5
6
|
// 使用lazy! 前缀 代表需要懒加载的Routerimport Shop from ‘lazy!./src/view/Shop‘;// Router 正常使用<Route path="/shop" component={Shop} /> |
原理 ： https://github.com/rongchanghai/lazyload-loader
以上是关于React 路由懒加载的几种实现方案的主要内容，如果未能解决你的问题，请参考以下文章