只有不断学习和成长,才能适应这个快速变化的世界。
1. 懒加载
1.1 React 懒加载
React 中懒加载 Lazy 与 Suspense 需要搭配使用。
React.lazy 定义:
React.1azy 函数能让你像渲染常规组件一样处理动态引入的组件。其实就是懒加载。
为什么代码要分割?
当你的程序越来越大,代码量越来越多。一个页面上堆积了很多功能,也许有些功能很可能都用不到,但是一样下载加载到页面上,所以这里面肯定有优化空间。就如图片懒加载的理论。
实现原理?
当 webpack 解析到该语法时,它会自动地开始进行代码分割(Code Splitting),分割成一个文件,当使用到这个文件的时候这段代码才会被异步加载。
解决方案?
在 React.1azy 和常用的三方包 react-1oadab1e(路由懒加载),都是使用了这个原理,然后配合 webpack 进行代码打包拆分达到异步加载,这样首屏渲染的速度将大大的提高。由于 React.1azy 不支持服务端渲染,所以这时候 react-1oadable 就是不错的选择。
1.2 Lazy 和 Suspense 使用
// 当使用到的时候才进行导入
const NewComponent = React.lazy(()=>import('./component/NewComponent'))
<Suspense fallback={<div>正在加载中</div>}>
<NewComponent></NewComponent>
<Suspense>