如何实现 React 模块动态导入
如何实现 React 模块动态导入
React 模块动态导入
代码分割
webpack & code splitting
https://reactjs.org/docs/code-splitting.html
https://zh-hans.reactjs.org/docs/code-splitting.html
Code-Splitting 可以创建多个可在运行时动态加载的包
https://webpack.js.org/guides/code-splitting/
https://rollupjs.org/guide/en/#code-splitting
https://github.com/browserify/factor-bundle
虽然您并未减少应用程序中的全部代码量,但避免了加载用户可能永远不需要的代码,并减少了初始加载过程中所需的代码量。
https://create-react-app.dev/docs/code-splitting/
https://nextjs.org/docs/advanced-features/dynamic-import
React.lazy and Suspense are not yet available for server-side rendering.
code-splitting & server-side rendering
https://github.com/gregberge/loadable-components
https://loadable-components.com/docs/server-side-rendering/
React.lazy
React.lazy 函数让你可以可以像导入将常规组件一样的渲染一个动态导入。
import OtherComponent from './OtherComponent';
// React.lazy
const OtherComponent = React.lazy(() => import('./OtherComponent'));
首次呈现此组件时,它将自动加载包含OtherComponent的捆绑包。
React.lazy 采用了必须调用动态 import()的函数。
这必须返回一个 Promise,该 Promise 解析为一个带有默认导出的模块,该模块包含一个 React组件。
然后,应该将懒惰的组件呈现在Suspense组件中,这使我们可以在等待懒惰的组件加载时显示一些后备内容(例如加载指示符)。
import React, { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
</div>
);
}
fallback prop 支持在等待组件加载时接受要渲染的任何React元素
您可以将 Suspense 组件放置在 lazy 组件上方的任何位置
您甚至可以用一个 Suspense 组件包装多个惰性组件。
import React, { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<section>
<OtherComponent />
<AnotherComponent />
</section>
</Suspense>
</div>
);
}
Error boundaries
错误边界
如果另一个模块无法加载(例如,由于网络故障),它将触发错误
您可以处理这些错误,以显示良好的用户体验,并通过错误边界管理恢复
创建错误边界后,您可以在惰性组件上方的任何位置使用它来在出现网络错误时显示错误状态。
import React, { Suspense } from 'react';
import MyErrorBoundary from './MyErrorBoundary';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
const MyComponent = () => (
<div>
<MyErrorBoundary>
<Suspense fallback={<div>Loading...</div>}>
<section>
<OtherComponent />
<AnotherComponent />
</section>
</Suspense>
</MyErrorBoundary>
</div>
);
https://reactjs.org/docs/error-boundaries.html
Route-based code splitting
基于路由的代码拆分
React Router & React.lazy
确定在应用程序中的何处引入代码拆分可能有些棘手
您要确保选择的位置能够平均拆分捆绑包,但不会破坏用户体验
路线是一个不错的起点
网络上的大多数人习惯了页面过渡,需要花费一些时间来加载
您还倾向于一次重新渲染整个页面,因此您的用户不太可能同时与页面上的其他元素进行交互
这是一个示例,说明如何使用带有 React.lazy 的 React Router 等库将基于路由的代码拆分为您的应用。
import React, {
Suspense,
lazy,
} from 'react';
import {
BrowserRouter as Router,
Route,
Switch,
} from 'react-router-dom';
const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));
const App = () => (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
</Switch>
</Suspense>
</Router>
);
https://reactjs.org/docs/code-splitting.html#route-based-code-splitting
react-router
https://reacttraining.com/react-router/
Named Exports
命名的导出
React.lazy 当前仅支持默认导出
如果要导入的模块使用命名的导出,则可以创建一个中间模块,将其重新导出为默认模块
这样可以确保摇树不停,并且不会拉扯未使用的组件
// ManyComponents.js
export const MyComponent = /* ... */;
export const MyUnusedComponent = /* ... */;
// MyComponent.js
// 中间模块, 导出为默认模块
export { MyComponent as default } from "./ManyComponents.js";
// MyApp.js
import React, { lazy } from 'react';
const MyComponent = lazy(() => import("./MyComponent.js"));
webpack
https://webpack.js.org/guides/code-splitting/
module.exports = {
entry: {
main: './src/app.js',
},
output: {
// `filename` provides a template for naming your bundles (remember to use `[name]`)
filename: '[name].bundle.js',
// `chunkFilename` provides a template for naming code-split bundles (optional)
chunkFilename: '[name].bundle.js',
// `path` is the folder where Webpack will place your bundles
path: './dist',
// `publicPath` is where Webpack will load your bundles from (optional)
publicPath: 'dist/'
}
};
https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269
webpack & magic-comments
https://webpack.js.org/api/module-methods/#magic-comments
https://webpack.docschina.org/api/module-methods/#magic-comments
// Single target
import(
/* webpackChunkName: "my-chunk-name" */
/* webpackMode: "lazy" */
/* webpackExports: ["default", "named"] */
'module'
);
// Multiple possible targets
import(
/* webpackInclude: /\.json$/ */
/* webpackExclude: /\.noimport\.json$/ */
/* webpackChunkName: "my-chunk-name" */
/* webpackMode: "lazy" */
/* webpackPrefetch: true */
/* webpackPreload: true */
`./locale/${language}`
);
import(/* webpackIgnore: true */ 'ignored-module.js');
babel
https://classic.yarnpkg.com/en/package/@babel/plugin-syntax-dynamic-import
$ yarn add -D @babel/plugin-syntax-dynamic-import
https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import
$ npm i -D @babel/plugin-syntax-dynamic-import
{
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}
// webpack config
const config = {
entry: [
"core-js/modules/es.promise",
"core-js/modules/es.array.iterator",
path.resolve(__dirname, "src/main.js"),
],
// ...
};
// or
// src/main.js
import "core-js/modules/es.promise";
import "core-js/modules/es.array.iterator";
// ...
https://www.npmjs.com/package/babel-plugin-dynamic-import-node
https://github.com/airbnb/babel-plugin-dynamic-import-node
$ yarn add -D babel-plugin-dynamic-import-node
.babelrc
{
"plugins": ["dynamic-import-node"]
}
dynamic import
https://webpack.js.org/guides/code-splitting/#dynamic-imports
import("./emoji-component").then(emoji => {
// 使用 promise
console.log(emoji));
});
切换路由
react-router
lazy-load
延迟加载 / 懒加载
code splitting & dynamic import
import()类似函数的形式将模块名称作为参数,并返回一个Promise,该Promise始终解析为模块的名称空间对象
https://github.com/tc39/proposal-dynamic-import
http://2ality.com/2017/01/import-operator.html#loading-code-on-demand
https://create-react-app.dev/docs/code-splitting/
const moduleA = `ESM (code splitting & dynamic import)`;
export { moduleA };
这将使 moduleA.js 及其所有唯一依赖项成为单独的块,仅在用户单击“加载”按钮后才加载
import React, { Component } from 'react';
class App extends Component {
handleClick = () => {
import('./moduleA')
.then(({ moduleA }) => {
// Use moduleA
})
.catch(err => {
// Handle failure
});
};
render() {
return (
<div>
<button onClick={this.handleClick}>Load</button>
</div>
);
}
}
export default App;
async / await & promise
如果愿意,还可以将其与 async / await 语法一起使用
// async / await
async handleClick = () => {
const moduleA = await import('./moduleA');
moduleA.then(({ moduleA }) => {
// Use moduleA
})
.catch(err => {
// Handle failure
});
};
chunks
https://create-react-app.dev/docs/production-build
refs
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
如何实现 React 模块动态导入的更多相关文章
- 反射attr以及模块动态导入
一.实现自省的四个函数 1.hasattr判断一个对象中有没有一个name字符串对应的方法或属性 class BlackMedium: feture="Ugly" def __in ...
- python 反射 动态导入模块 类attr属性
1.反射 hasattr getattr delattr setattr 优点:事先定义好接口,接口只有在被完成后才能真正执行,这实现了即插即用,这其实是一种“后期绑定”,即先定义好接口, 然后是再去 ...
- 封装,封装的原理,Property ,setter ,deleter,多态,内置函数 ,__str__ , __del__,反射,动态导入模块
1,封装 ## 什么是封装 what 对外隐藏内部的属性,以及实现细节,并给外部提供使用的接口 学习封装的目的:就是为了能够限制外界对内部数据的方法 注意 :封装有隐藏的意思,但不是单纯的隐藏 pyt ...
- day26 封装、多态、内置函数、反射、动态导入
今日内容 1.封装 什么是封装? 封装从字面意思上看就只将某种东西封起来装好,当我们代码中的某些方法与属性不想让外界进行访问时,就对这些属性进行特殊的处理,使这种属性或者方法不能被外界直接进行访问或者 ...
- python面向对象反射-框架原理-动态导入-元类-自定义类-单例模式-项目的生命周期-05
反射 reflect 反射(reflect)其实是反省,自省的意思 反省:指的是一个对象应该具备可以检测.修改.增加自身属性的能力 反射:通过字符串获取对象或者类的属性,进行操作 设计框架时需要通过反 ...
- Python之路-python(面向对象进阶(模块的动态导入、断言、Socket Server))
模块的动态导入 断言 Socket Server 一.模块的动态导入 class C(object): def __init__(self): self.name = "zhangsan&q ...
- Python 动态导入模块
动态导入模块 目录结构: zhangsandeMacBook-Air:1110 zhangsan$ tree . . ├── lib │ └── aa.py ├── test1.py lib目录下 ...
- Python 实现接口类的两种方式+邮件提醒+动态导入模块+反射(参考Django中间件源码)
实现接口类的两种方式 方式一 from abc import ABCMeta from abc import abstractmethod class BaseMessage(metaclass=AB ...
- python importlib动态导入模块
一般而言,当我们需要某些功能的模块时(无论是内置模块或自定义功能的模块),可以通过import module 或者 from * import module的方式导入,这属于静态导入,很容易理解. 而 ...
随机推荐
- 解决键冲突 — Redis 设计与实现 https://redisbook.com/preview/dict/collision_resolution.html
解决键冲突 - Redis 设计与实现 https://redisbook.com/preview/dict/collision_resolution.html
- codevs3639
题目描述 Description 给出一棵树,求出树的中心. 为了定义树的中心,首先给每个结点进行标号.对于一个结点K,如果把K从树中删除(连同与它相连的边一起),剩下的被分成了很多块,每一块显然又是 ...
- GeoMesa Spark
GeoMesa Spark 一.Spark JTS 1.1 示例 1.2配置 1.3 地理空间用户定义的类型和功能 1.4 geojson输出 1.5 Building 二.Spark Core 2. ...
- mysql 用户 登陆 权限相关
1. CREATE USER 'dog2'@'localhost' IDENTIFIED BY ''; 将"localhost"改为"%",表示在任何一台电脑上 ...
- OpenStack (haproxy)
openstack部署脚本 链接:<https://pan.baidu.com/s/1BTp_tGNC6ZWwVmKkhwivgw > 提取码:jxuz haproxy 官网:< h ...
- KVM虚拟化(KVM简介和KVM安装)
KVM 虚拟化架构分类 寄居虚拟化架构:指在宿主操作系统之上安装和运行虚拟化程序,依赖于宿主操作系统对设备的支持和物理资源的管理. 裸金属虚拟化架构:指直接在硬件上面安装虚拟化软件,再在其上安装操作系 ...
- Git实践笔记(一)
Git是什么 Git是目前世界上最先进的分布式版本控制系统. 工作原理 / 流程: Workspace:工作区 Index / Stage:暂存区 Repository:仓库区(或本地仓库) Remo ...
- 在阿里云服务器上(centos 8) 安装自己的MQTT服务器 (mosquitto)
layout: post title: 在阿里云服务器上(centos 8) 安装自己的MQTT服务器 (mosquitto) subtitle: date: 2020-3-2 author: Dap ...
- Codeforces Round #533 (Div. 2) C. Ayoub and Lost Array(递推)
题意: 长为 n,由 l ~ r 中的数组成,其和模 3 为 0 的数组数目. 思路: dp[ i ][ j ] 为长为 i,模 3 为 j 的数组数目. #include <bits/stdc ...
- 【hdu 1573】X问题(数论--拓展欧几里德 求解同余方程组的个数)
题目:求在小于等于N的正整数中有多少个X满足:X mod a[0] = b[0], X mod a[1] = b[1], X mod a[2] = b[2], -, X mod a[i] = b[i] ...