搜索 - 腾讯云开发者社区-腾讯云

文章/答案/技术大牛

发布

来自专栏爱编码
react-loadable懒加载
简介 react-loadable 官网最精简的描述： A higher order component for loading components with dynamic imports. react-loadable的作用由于路由只是组件，我们仍然可以在路由级别轻松地进行代码拆分。在你的应用程序中引入新的代码分割点应该是如此简单，以至于你不会再三考虑。懒加载配置/router/index.js import React from 'react' import Loadable from "react-loadable" let config = /components/pc/pc_blog_index' //这句就是引入react-loadable import routers from '. 服务器渲染等更加高级操作可以参考官网 https://github.com/jamiebuilds/react-loadable 至于普通的操作按上面两步操作，结合官网的相关配置API，估计你能够实现懒加载的功能了
2.9K10发布于 2019-07-03
来自专栏前端探索
使用 React.Suspense 替换 react-loadable
当前大部分 React 应用需要使用 code splitting 的时候，都选择使用优秀的 react-loadable 来处理检测代码段是否已加载。 React.Suspense是一个新添加到核心React库中的功能，t他的功能基本和 react-loadable 一致，所以不用多说，让我们来看看用 React.Suspense 替换 react-loadable Step 2：确定您的异步组件在 react-loadable 当中，按需加载可能在长这样： const Loading = ({ pastDelay }) => { if (pastDelay ok, 到此，其实我们已经实现了和 react-loadable 一样的功能。或许细心的你可能发现了，React.Suspense 没有 delay 参数。更小的bundle： react-loadable gzip后大概是 2K，去掉这个第三方库后，所以打包时间并没有减少多少，但是确确实实减少了2K。
4.5K140发布于 2019-01-06
来自专栏嘿嘿的专栏
next.js 源码解析 - dynamic 篇
}); 这种情况下 next.js 会在组件加载过程中显示 loading 的内容来占位，这里其实在内部使用的是 react-loadable。 return loadableFn(loadableOptions); 可以看到当 ssr 参数被设置为 false 时并且非 suspense 时，将会直接返回 noSSR，否则将会直接调用 react-loadable 到这里源码解读就结束了，可能又同学会疑惑，在 ssr 关闭的情况下，客户端依旧会使用 react-loadable 进行渲染，而服务端则会直接渲染 Loading，那为啥不会出现 hydration fail 我一开始也愣了一下，想了想 react-loadable 在客户端初始化渲染的也是 loading 的内容，所以确实没问题的。总结综上可以看出 next.js 的 dynamic 其实是将 React.lazy 和 react-loadable 两个方法进行了组合，本身代码量也并不算多，一定程度上对异步组件的使用进行了收口，
2.2K20编辑于 2023-05-09

来自专栏腾讯IVWEB团队的专栏

为你的React工程添加异步组件支持

"module": "esnext", 使用react-loadable封装异步组件 import Loadable from 'react-loadable' import Loading from

1.4K50发布于 2020-06-28

来自专栏全栈程序员必看

react项目实战教程(react项目实战)

return <Route exact={ route.exact}/> }) } 1-5 路由的懒加载下载react-loadable 通过yarn add react-loadable安装在npm官网中搜索查阅使用方法并新建src/component/loading/index.js文件,当懒加载未完成时,会显示该页面的内容更改src/views/index.js文件 import Loadable from 'react-loadable'; import Loading from '..

3.1K50编辑于 2022-07-28

来自专栏云瓣

打包优化实践(如何Code Spliting)

使用动态引入语法 import() 首先使用官网安利的 react-loadable 这个包，它的思想是根据路由(代替模块)进行代码的动态分割，异步加载所需要的组件，从而极大地提高页面加载速率。 1.45 KB build/static/js/6.92fbac58.chunk.js 1.13 KB build/static/js/9.59160a3a.chunk.js 有多少个路由，react-loadable 那么 react-loadable 的神秘之力是如何实现的呢，它本质上是个运用了属性代理的高阶函数，通过在高阶函数里配合 import() 加进各种状态，从而达到异步加载模块的效果。

1.5K20发布于 2018-10-11

来自专栏leon的专栏

React router动态加载组件-适配器模式的应用

业界目前实现的方案有以下几种： react-router的动态路由getComponent方法(router4已不支持) 使用react-loadable小工具库自定义高阶组件进行按需加载而这些方案共通的点其实，react-loadable也是按这种思路去实现的，只不过增加了很多附属的功能点而已。

2.3K30发布于 2019-08-28

来自专栏终身学习者

在 React Native 中原生实现动态导入

在React Native中，你可以使用react-loadable库来动态加载和渲染组件。 import Loadable from 'react-loadable'; // Define a loading component while the target component is being application function App() { return ( <View> <DynamicComponent /> </View> ); } 在这段代码中：从 react-loadable

3.9K10编辑于 2024-02-21

来自专栏前端技术江湖

React Router3到5 升级小记

这里我使用的是一个现有的库react-loadable 搞定的，当然也可以自己写一个。 import React from 'react'; import Loadable from 'react-loadable'; //加载动画 const loadingComponent =()=

2.6K20发布于 2020-03-17

来自专栏Cellinlab's Blog

早早聊 C7 笔记 - 【字节】时光：微前端沙盒体系的落地实践

# 拆分维度 Code Splitting dynamic import react-lazy(react-loadable) webpack 4.0 Named chunk Runtime Splitting

46820编辑于 2023-05-17

来自专栏IMWeb前端团队

优化 Webpack 构建结果

/TargetComponent')} {...props} /> // Use <AsyncComponent xxx="1" /> 也可以使用react-loadable等库实现同样的效果。

74990发布于 2018-01-08

来自专栏前端小而全的知识归纳

从项目中由浅入深的学习react (2)

mapStateToProps:外部state对象和UI组件的props映射关系,5.mapDispatchToProps:是connect第二个参数， UI 组件的参数到store.dispatch方法的映射 react-loadable

1.8K40发布于 2019-04-17

来自专栏IMWeb前端团队

优化 Webpack 构建结果

/TargetComponent')} {...props} /> // Use <AsyncComponent xxx="1" /> 也可以使用react-loadable等库实现同样的效果。

66030发布于 2019-12-03

来自专栏高级前端面试笔记

几个你必须知道的React错误实践_2023-02-27

react-loadable 是一个专门处理这件事的第三方库，使用它我们可以很好的将组件进行拆分。 import Loadable from 'react-loadable' import Loading from 'loading' const LoadableComponent = Loadable

96640编辑于 2023-02-27

来自专栏JowayYoung谈前端

npm依赖(框架平台)

react-fastclick: React点透组件 react-hold: React占位组件 react-hot-loader: React模块热替换转换器 react-lazyload: React懒加载组件 react-loadable

3.5K20发布于 2020-04-01

来自专栏前端精读评论

47. 精读《webpack4.0 升级指南》

/src") 配合 react-loadable 使用更佳： Loadable({ loader: () => import(/* webpackChunkName: "src" */ ". /src"), loading: (): any => null }) 因为 react-loadable 让页面按 chunk 方式打包，而 webpack 又会自动 picke shared chunks

72110编辑于 2022-03-14

来自专栏IMWeb前端团队

webpack 4 Code Splitting 的 splitChunks 配置探索

redux-thunk', 'react-redux', 'react-router-dom', 'react-router-redux', 'history', 'prop-types', 'react-loadable

2.4K10发布于 2019-12-03

来自专栏前端精读评论

54. 精读《在浏览器运行 serverRender》

浏览器执行 ssr 监听就不说了，主要是如何利用 react-router 与 react-loadable 完成前端 ssr。

49340编辑于 2022-03-14

来自专栏跨平台全栈俱乐部

webpack4大结局：加入腾讯IM配置策略，实现前端工程化环境极致优化

，附带代码分割功能，每个按需加载的组件打包后都会被单独分割成一个文件 import React from 'react' import loadable from 'react-loadable preset @babel/preset-react解析 jsx语法 @babel/preset-env解析es6语法 @babel/plugin-syntax-dynamic-import解析react-loadable

2.4K30发布于 2019-08-02

来自专栏前端技术江湖

写给前端新人：从 0到1 搭建一个前端项目，都需要做什么？

{inputVale} /> r-show

内容

# 注意：这是 `r-if` 的效果，不会渲染节点四、项目配置二（优化配置）实现组件懒加载 react-loadable import Loadable from 'react-loadable' const Loading = (props: any) => { if (props.error) {

5.8K50发布于 2021-06-01

第 2 页第 3 页第 4 页

点击加载更多

react-loadable懒加载

使用 React.Suspense 替换 react-loadable

next.js 源码解析 - dynamic 篇

为你的React工程添加异步组件支持

react项目实战教程(react项目实战)

打包优化实践(如何Code Spliting)

React router动态加载组件-适配器模式的应用

在 React Native 中原生实现动态导入

React Router3到5 升级小记

早早聊 C7 笔记 - 【字节】时光：微前端沙盒体系的落地实践

优化 Webpack 构建结果

从项目中由浅入深的学习react (2)

优化 Webpack 构建结果

几个你必须知道的React错误实践_2023-02-27

npm依赖(框架平台)

47. 精读《webpack4.0 升级指南》

webpack 4 Code Splitting 的 splitChunks 配置探索

54. 精读《在浏览器运行 serverRender》

webpack4大结局：加入腾讯IM配置策略，实现前端工程化环境极致优化

写给前端新人：从 0到1 搭建一个前端项目，都需要做什么？

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐