这篇文字简单的介绍了反应在路由懒加载方面的几种实现方案。
<强>传统的两种方式
<强> import()
符合ECMAScript提议的进口()语法,该提案与普通导入语句或要求函数的类似,但返回一个承诺对象。这意味着模块时异步加载的
webpack v2 +使用
使用方式
功能组件(){
返回导入(/* webpackChunkName:“lodash”*/lodash)。然后(_=比;{
var=document.createElement元素(div);
元素。innerHTML=_。加入('你好',' webpack ', ' ');
返回元素;
})。抓住(错误=比;当加载组件发生错误);
}//或者使用异步
异步函数getComponent () {
var=document.createElement元素(div);
const _=等待进口(/* webpackChunkName:“lodash”*/lodash);
元素。innerHTML=_。加入('你好',' webpack ', ' ');
返回元素;
}
之前
<强>。确保
webpack指定的使用方式
webpack v1 v2指定使用方式
使用方式
要求。确保([]、功能(需要){
var=需要列表(“。/列表”);
list.show ();
、“列表”);
& lt; !——路由器比;
const Foo=要求。确保([],()=比;{
要求(“Foo”);
},呃=比;{
控制台。错误(“我们未能加载数据块:“+错);
}," chunk-name ");//react-router2或3
& lt;路由路径="/foo " getComponent={foo}/比;
之前
<强> lazyload-loader
相对于前两种,此种方式写法更为简洁。
使用方式
//webpack配置文件中使用lazyload-loader(必须将lazuyload-loader放置在使用的最右侧)
模块:{
规则:[
{
测试:/\。(js | jsx)/美元,,
用途:[
“babel-loader”,
“lazyload-loader”
]
}，
之前
业务代码中
//使用懒惰!前缀代表需要懒加载的路由器
从“懒!进口商店。/src/视图/商店';//路由器正常使用
& lt;路由路径="/商店”组件={店}/比;
之前
原理:https://github.com/rongchanghai/lazyload-loader
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
