react图片懒加载和路由懒加载的使用

一、路由懒加载实现代码分割，让组件按需加载，优化项目性能。

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>