react-router4 +react-loadable 实现Code Splitting

BaronZhang 发布于2019-08-22 16:58 / 2464人阅读

摘要：之前在中文官方文档使用的是。实现按需加载，升级之后，这个方法就走不通了。之后看了的官网，按需加载只需要神器。

之前在react-router中文官方文档使用的是require。ensure实现按需加载，升级之后，这个方法就走不通了。
之后看了react-router的官网，按需加载只需要神器 react-loadable 。
react-loadable的好处：

基于import()的自动代码拆分
import()的厉害之处在于 Webpack 2 可以自动拆分代码，不论你在何时加入新代码，都不用做其他额外的工作，你可以通过切换 import() 位置来轻易试验代码拆分点，以便让你的app达到最佳性能。

避免组件加载闪烁
Loading组件需要接收一个pastDelay prop(默认200ms)
export default function Loading({ error, pastDelay }) {

 if (error) {
   return Error!;
 } else if (pastDelay) {
   return Loading...;
 } else {
   return null;
 }

}

预加载
Loadable 创建的组件向外暴露了一个用于预加载的静态方法：组件.preload()
最后说到webpack搭配react-loadable实现懒加载：
使用到的库有：react-loadable+plugin-syntax-dynamic-import
在 .babelrc进行如下配置：

{
 "presets": [
   "react"
 ],
 "plugins": [
   "syntax-dynamic-import"
 ]

}
完整使用如下：

import Loadable from "react-loadable";
import Loading from "./Loading";

const LoadableComponent = Loadable({
  loader: () => import("./Dashboard"),
  loading: Loading,
})

export default class LoadableDashboard extends React.Component {
  render() {
    return ;
  }
}

混合云服务器托管

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94732.html

react 前端项目技术选型、开发工具、周边生态

摘要：更多参考通过库掌握函数组件有些时候，我们想要动态的加载一些组件按需加载，比如在一个单页面应用中页面的组件页面的组件页面的组件只有真正要实例化当前页面的时候，才会去加载相应的组件。 react 前端项目技术选型、开发工具、周边生态声明：这不是一篇介绍 React 基础知识的文章，需要熟悉 React 相关知识主架构：react, react-router, redux, redux...

hersion 2019-08-30 15:54 评论0 收藏0
react 前端项目技术选型、开发工具、周边生态

摘要：更多参考通过库掌握函数组件有些时候，我们想要动态的加载一些组件按需加载，比如在一个单页面应用中页面的组件页面的组件页面的组件只有真正要实例化当前页面的时候，才会去加载相应的组件。 react 前端项目技术选型、开发工具、周边生态声明：这不是一篇介绍 React 基础知识的文章，需要熟悉 React 相关知识主架构：react, react-router, redux, redux...

kidsamong 2019-08-23 14:07 评论0 收藏0
react搭建后台管理（react初窥）

摘要：前言以前一直是用进行的开发于是决定年后弄一弄所以年后这段时间也就一直瞎弄可算是看到成果了本来是想写一个类似仿今日头条那样的项目来入手后来又寻思还不如写个后台管理呢。于是乎自己便着手简单的搭建了一个集中设置的版本。前言以前一直是用vue进行的开发, 于是决定年后弄一弄react, 所以年后这段时间也就一直瞎弄react, 可算是看到成果了本来是想写一个类似 Vue仿今日头条那样...

wangjuntytl 2019-08-22 15:23 评论0 收藏0
深入理解 Webpack 打包分块（下）

摘要：例如允许我们在打包时将脚本分块利用浏览器缓存我们能够有的放矢的加载资源。文章的内容大体分为两个方面，一方面在思路制定模块分离的策略，另一方面从技术上对方案进行落地。我之前提到测试之下是什么样具体的场景并不重要。前言随着前端代码需要处理的业务越来越繁重，我们不得不面临的一个问题是前端的代码体积也变得越来越庞大。这造成无论是在调式还是在上线时都需要花长时间等待编译完成，并且用户也不得不花额外的...

pingan8787 2019-05-22 19:26 评论0 收藏0