react 代码切割之路由懒加载

前端小猪

关注

发布于: 2021 年 02 月 26 日

引言

衡量网站的性能的指标有很多，其中有项重要的指标就是网站的首屏时间，而代码分割却是优化首屏时间最通用的方法

三种通用的代码拆分方法（基于 webpack）

入口点：使用entry配置手动拆分代码
防止重复：使用SplitChunksPlugin重复数据删除和拆分块
动态导入：通过模块内的内联函数调用拆分代码

动态导入（react-loadable）有以下概念：

动态导入的组件自动进行性能优异的代码分割
所支持的是组件的动态导入，而不是路由的动态导入
基本思想是组件的按需加载

动态导入的注意事项：

要在 react 中使用 import()，需要安装 @babel/plugin-syntax-dynamic-import 插件，并在 babel 配置中引入
import 的路径是相对路径，不能添加绝对路径
react 中的动态导入还有：react 原生 React.lazy（v16.6），原生 Suspense，库 Loadable Component

配合 react-router-dom 实现 react 的路由组件按需加载

import Loadable from 'react-loadable'

复制代码

// 懒加载路由const AsyncComponent = component =>  Loadable({    loader: lazyLoad[component], // 加载promise来加载组件    loading: MyLoadingComponent, // 当加载进行中或者错误时加载的组件    delay: 500 // 加载loading组件之前的延迟，防止闪屏})

复制代码

const lazyLoad = {  home: () =>    // webpackChunkName（代码分割后的代码块名）    // 添加webpackPrefetch：（未来可能需要的资源）    //   这将导致将<link rel="prefetch" href="home.js">其附加在页面的开头    //   这将指示浏览器在空闲时间预取home.js文件    // 不配置预加载和预取提取则按需加载    import(/* webpackChunkName: "home" */ /* webpackPrefetch: true */ './home'),  detail: () =>    // webpackPreload（当前导航期间可能需要的资源）    import(/* webpackChunkName: "detail" /* webpackPreload: true */  */ './detail') }

复制代码

<Switch>  <Route    path="/app/home"    component={AsyncComponent('home')}   />  <Route    path="/app/detail"    component={AsyncComponent('detail')}   /></Switch>

复制代码

扩展链接

发布于: 2021 年 02 月 26 日阅读数: 22

原文链接:【http://xie.infoq.cn/article/4fa8d0c3bdc64e87f29dff051】。文章转载请联系作者。

前端小猪

关注

还未添加个人签名 2019.12.02 加入

https://github.com/pipihua666

发布

暂无评论

创作场景

react 代码切割之路由懒加载

动态导入（react-loadable）有以下概念：

动态导入的注意事项：

配合 react-router-dom 实现 react 的路由组件按需加载

前端小猪

评论