React图片懒加载和路由懒加载的简单介绍

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

1. 路由懒加载

路由懒加载实现代码分隔，可以将代码拆分视为增量下载应用程序。

• 安装：

npm install @loadable/component 

• 使用：

import loadable from '@loadable/component'
const LoadDemoComponent = loadable(() => import('./components/Demo.jsx'))
function App() {
  return (
    <div>
        <div> <LoadDemoComponent/></div>
    </div>
  );
}
export default App;

这里我会报错，接下来你需要：

npm install @babel/plugin-syntax-dynamic-import

配置bable：“plugins”: ["@babel/plugin-syntax-dynamic-import"]，这里需要将package.json配置全部暴露出来才可以。
然后运行后，还是报错。我将node_modules删除后，重新install 后，错误解决。

官方Router V5地址

2. 图片懒加载

• 插件地址 react-lazyload：
• 安装 ：

npm install --save react-lazyload

官网最简单的案例：

<div className="list">
      <LazyLoad height={200}>
        <img src="tiger.jpg" /> 
      </LazyLoad>
</div>

官网讲解的比较详细了，这里就不做过多介绍