懒加载用于解决首屏加载缓慢的问题
原理
利用按需加载的思想,在第一次加载的过程中,只加载用户所看到的部分剩下的部分,加快了首屏加载的速度。其实不管是vue还是react,其路由懒加载的实现得益于wepack的异步模块打包,其原理就是利用es6 import()
函数。这个import
不是import命令
。同样是引入模块,import命令
是同步引入模块,而import()
函数动态引入。当 Webpack 解析到该语法时,它会自动地开始进行代码分割(Code Splitting),分割成一个文件,当使用到这个文件的时候会这段代码才会被异步加载。
const a = () => import('./testComponent')
1.import()
符合ECMAScript提议的import()语法,该提案与普通 import 语句或 require 函数的类似,但返回一个 Promise 对象。这意味着模块时异步加载的
//import 命令
import { add } from './math';
console.log(add(16, 26));
//import函数
import("./math").then(math => {
console.log(math.add(16, 26));
});
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;
}
路由和组件的常用两种懒加载方式:
1、vue异步组件实现路由懒加载
component:resolve=>([‘需要加载的路由的地址’,resolve])
2、es提出的import(推荐使用这种方式)
const HelloWorld = ()=>import(‘需要加载的模块地址’)
react懒加载:
如何使用React.lazy
//OtherComponent.js 文件内容
import React from 'react'
const OtherComponent = ()=>{
return (
<div>
我已加载
</div>
)
}
export default OtherComponent
// App.js 文件内容
import React from 'react';
import './App.css';
//使用React.lazy导入OtherComponent组件
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function App() {
return (
<div className="App">
<OtherComponent/>
</div>
);
}
export default App;
这是最简单的React.lazy
,但是这样页面会报错。这个报错提示我们,在React使用了lazy
之后,会存在一个加载中的空档期,React不知道在这个空档期中该显示什么内容,所以需要我们指定。接下来就要使用到Suspense
。
** Suspense**
如果在 App
渲染完成后,包含 OtherComponent
的模块还没有被加载完成,我们可以使用加载指示器为此组件做优雅降级。这里我们使用 Suspense
组件来解决。
import React, { Suspense, Component } from 'react';
import './App.css';
//使用React.lazy导入OtherComponent组件
const OtherComponent = React.lazy(() => import('./OtherComponent'));
export default class App extends Component {
state = {
visible: false
}
render() {
return (
<div className="App">
<button onClick={() => {
this.setState({ visible: true })
}}>
加载OtherComponent组件
</button>
<Suspense fallback={<div>Loading...</div>}>
{
this.state.visible
?
<OtherComponent />
:
null
}
</Suspense>
</div>
)
}
}