一、路由懒加载实现代码分割,让组件按需加载,优化项目性能。
1、路由文档里面有详细介绍:https://reactrouter.com/web/guides/code-splitting
安装:npm install @loadable/component -S
使用语法:
安装好后引入组件的时候就这样引入就可以了
const Home = loadable(() =>import ( ‘/home’))
2、如果遇到eslint报错就安装这个插件(自己搭建脚手架不需要):
1、安装:
npm install babel-eslint-D
npm install @babel/plugin-syntax-dynamic-import
配置bable:“plugins”: ["@babel/plugin-syntax-dynamic-import"]
配置 .Eslint.js文件:“parser”: “babel-eslint”
二、图片懒加载:
安装:npm install --save react-lazyload
引入:import LazyLoad from 'react-lazyload';
页面使用:
<div className="list">
<LazyLoad height={200}>
<img src="tiger.jpg" />
</LazyLoad>
</div>