React ----- 路由懒加载的几种实现方案
2024-09-05 10:11:35
传统的两种方式
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} />
最新文章
- h1、h2、h3标签及strong标签对页面seo的影响
- 欢迎来到Joyful Physics博客
- 离线pip下载Python包
- javascript call与apply关键字的作用
- 字符集GBK升级UTF8
- serialVersionUID
- APC -- Asynchronous Procedure Call 异步过程调用
- 推荐一个很好的富文本web编辑器UEditor
- ios开发之UIImageView
- ssh框架的搭建
- QT 自动获取可用串口
- 浅谈长尾理论--《Makers》读后感
- Fiddler过滤会话
- 设置如何远程连接mysql数据库
- spring boot sharding-jdbc实现分佈式读写分离和分库分表的实现
- jeDeta 日历控件的那些坑
- PID控制器(比例-积分-微分控制器)- IV
- DCDC与LDO
- [POJ1655]Balancing Act
- C/C++/动态链接库DLL中函数的调用约定与名称修饰
热门文章
- C++编写绚丽的界面
- MongoDB基本概念和安装配置
- iOS开发 之 不要告诉我你真的懂isEqual与hash!
- CoreData 从入门到精通 (一) 数据模型 + CoreData 栈的创建
- m_Orchestrate learning system---二十一、怎样写算法比较轻松
- zzulioj--1712--神秘的数列(水题)
- Ubuntu16.04下Mongodb官网卸载部署步骤(图文详解)(博主推荐)
- Parquet学习总结
- python中使用easygui
- C++调用约定和名字约定 thiscall