懒加载 ：为什么？
解决页面假死状态
单页面vue和react,，只有一个HTML,首屏加载慢，后期切换比较快，不利于搜索引擎优化（SU），前端渲染的都不利于
首屏做到500kb才利于用户体验，最大不要超过1兆
组件的懒加载的4种方法
1、webpack + es6 的 import ( this.props.children 为回调函数 );
2、webpack + es6 的 import 纯粹的高阶组价
3、webpack + es6 的 import +async（高阶函数）
4、webpack + require.ensure (高阶组件)
原理：只有使用到这个组件的时候再去加载
法一
1、webpack + es6 的 import（采用的是this.props.children为回调函数的方式）
lazy.jsx组件中
import React , { Component } from 'react';
export default class extends Component {
constructor ( props ) {
super ( props );
this.load(props); //调用下面load
this.state={
Com:null
};
};
load(props){ //this.props.load()就是调用indexrou.jsx传过来的函数
props.load().then((Com)=>{
console.log(Com.default);//得到的就是传过来的函数
this.setState({
Com:Com.default?Com.default:null
});
});
};
render () {
if(!this.state.Com){
return null;
}else{
return this.props.children(this.state.Com);
}
};
};
在router路由里 使用在indexrou.jsx
//组件懒加载：
1、webpack + es6 的 import
{(Com)=><Com/>} 就是从这里传的 this.props.children(this.state.Com);
因为不能直接写变量，所以写成()=>import('../components/demo2')
import Load from '../components/lazy';
let Demo2=function(){
return <Load load={()=>import('../components/demo2')}>
{(Com)=><Com/>}
</Load>;
};
效果：在 Network 的 All 中点击 Demo2 的才会加载，不点不加载
法二
lazy.jsx
2、webpack + es6 的 import 纯粹的高阶组价
import React , { Component } from 'react';
export default function(loading){//传过来一个函数
return class extends Component {
constructor ( props ) {
super ( props );
this.state={
Com:null
};
this.load();
};
load(props){
loading().then((Com)=>{ //调用函数获取它传过来的路径
this.setState({
Com:Com.default?Com.default:null
});
});
};
render () {
let Com=this.state.Com;
return Com?<Com/>:null;
};
};
}
在 router路由里 indexrou.js
import Load from '../components/lazy';
let Demo2=Load(()=>import('../components/demo2'));
法三
lazy.jsx
import React , { Component } from 'react';
3、webpack+es6的import +async（高阶函数）
export default function(loading){
return class extends Component {
constructor ( props ) {
super ( props );
this.state={
Com:null
};
};
}
//即使是同步的话执行的也是promise.resolve这个方法，将同步代码包装一层，进行同步
//await后面接收的是值或promise
async componentWillMount(){
let Com=await loading(); //依次执行，只有一个await往下走，Com是有值的
this.setState({
Com:Com.default?Com.default:null
});
};
render () {
let Com=this.state.Com;
return Com?<Com/>:null;
};
};
在router路由里indexrou.jsx
3、webpack+es6的import
import Load from '../components/lazy';
let Demo2=Load(()=>import('../components/demo2'));
法四
lazy.jsx
4、webpack 和 commonjs 的 require.ensure (高阶组价)
import React , { Component } from 'react';
export default function(loading){
return class extends Component {
constructor ( props ) {
super ( props );
this.state={
Com:null
};
};
componentWillMount(){
new Promise((resolve,reject)=>{
require.ensure([], function(require) {//[]依赖项
var c = loading().default;
console.log(c);
resolve(c);
});
}).then((data)=>{
this.setState({
Com:data
});
});
};
render(){
let Com=this.state.Com;
return Com?<Com/>:null;
};
};
};
在router路由里indexrou.jsx
4、webpack和commonjs的require.ensure (高阶组价)
import Load from '../components/lazy';
let Demo2=Load(()=>require('../components/demo2'));
(1)
image
(2)
image
(3)
image
(4)
image
网友评论