前言

大家好，我是小阵 🔥，一路奔波不停的码字业务员 如果喜欢我的文章，可以关注 ➕ 点赞，与我一同成长吧~😋 加我微信：zzz886885，邀你进群，一起学习交流，摸鱼学习两不误🌟

开开心心学技术大法~~

来了来了，他真的来了~

正文

React的路由懒加载

之前路由懒加载通过react-loadable

说白了路由懒加载其实就是基于路由的代码分割

import Loadable from 'react-loadable';
import Loading from './my-loading-component';
 
const LoadableComponent = Loadable({
  loader: () => import('./my-component'),
  loading: Loading,
});
 
export default class App extends React.Component {
  render() {
    return <LoadableComponent/>;
  }
}

现在可通过

React.Suspense与React.lazy来实现

• React.suspense用来实现懒加载路由时的loading兜底

  • fallback参数中可以传入react组件或dom元素
  • 例如：<div>Loading...</div>
  • 注意：React.suspense不只是针对于懒加载的路由，而针对所有懒加载的组件，只要是存在懒加载的，都可以通过在外成包裹 React.suspense来实现loading或其他占位dom

• React.lazy用来包装组件路径，实现路由懒加载

  • 例如：

    const LazyDemoPage1 = lazy(() => import("@pages/DemoPage1"));
    

  • 注意：React.lazy目前只支持默认导出(default exports)

更多可以参考React的代码分割

结语

如果文章真的有帮到你，希望可以多多点赞、收藏、关注支持一波呀！！小阵会很开心哒~

文章如有错误或不严谨之处，还望指出，感谢感谢！！！

往期好文推荐「我不推荐下，大家可能就错过了史上最牛逼vscode插件集合啦！！！(嘎嘎嘎~)😄」

• vscode最牛插件分享，只有你想不到，没有vscode办不到

• 手写loader是什么样的体验？

• 开发谷歌主题插件初体验

• 看完就会的webapck loader编写教程

• 六十行代码阐述webpack-core的思想

• 因为懒，我写了个vscode插件

• 为了生成目录结构方便，我写了个vscode插件

• 我用30行代码实现了简易的husky

• 抛弃HTML Snippets，拥抱Emmet成为html大师！