更多Dash应用开发干货知识、案例,欢迎关注"玩转Dash"微信公众号👇

大家好我是费老师,在之前的几篇文章中,我们针对Python
生态中++强大++ 且++灵活++ 的全栈应用开发 框架Dash
,分别介绍了其3.x
新版本中众多的新功能及特性:
- Python全栈应用开发利器Dash 3.x新版本介绍(1)
- Python全栈应用开发利器Dash 3.x新版本介绍(2)
- 回调函数支持异步写法!Dash 3.x新版本介绍(3)
- Python全栈应用开发利器Dash 3.x新版本介绍(4)
而今天的文章中,我将为大家介绍Dash
从3.0
版本开始,全新引入的插件机制 ,使得我们可以在Dash
应用中一行代码灵活启用各种丰富的辅助拓展功能~
Dash中全新引入的插件机制
从3.0.0
版本开始,Dash
中新增了hooks
机制,其本质是在当前Dash
应用项目基础上,以低耦合的方式,为应用的不同部分(页面内容、回调逻辑、错误处理等)额外添加自定义功能。
对于广大Dash
应用开发者,其实不需要了解这套机制背后的原理,直接通过pip
安装使用各种现成的,基于hooks
机制构建的成品插件即可,下面我们来介绍一些开箱即用的实用Dash
插件,增强日常Dash
应用开发、部署体验,你也可以在下面的仓库中找到完整的可用插件列表,以及如何自己开发Dash
插件:
Github
仓库:https://github.com/CNFeffery/awesome-dash-hooksGitee
镜像同步仓库:https://gitee.com/cnfeffery/awesome-dash-hooks
dash-change-cdn-plugin
首先我们要介绍的Dash
插件dash-change-cdn-plugin
,对于需要通过互联网部署Dash
应用的朋友非常的有用,终端执行下列命令完成插件的安装,跟常规的Python
包安装没有区别:
bash
pip install dash-change-cdn-plugin -U
举一个非常简单的Dash
应用示例:
python
import dash
from dash import html
import feffery_antd_components as fac
from feffery_dash_utils.style_utils import style
# 导入dash-change-cdn-plugin插件
from dash_change_cdn_plugin import setup_change_cdn_plugin
# 启用插件功能
setup_change_cdn_plugin()
# 这里注意要设置serve_locally=False配合启用外部CDN资源
app = dash.Dash(__name__, serve_locally=False)
app.layout = html.Div(
[
fac.AntdAlert(
message="测试信息内容",
description="测试描述内容",
showIcon=True,
type="success",
)
],
style=style(padding=50),
)
if __name__ == "__main__":
app.run()
其中最关键的代码只有下面这行:
python
# 启用插件功能
setup_change_cdn_plugin()
在此基础上,原本在dash.Dash()
中设置serve_locally=False
后,非debug
模式下默认自动切换的指向unpkg
的各静态资源CDN
地址,会受dash-change-cdn-plugin
插件作用,自动切换到访问速度更快更稳定的npmmirror
,特别是对于国内通过互联网部署Dash
应用的朋友,这一点非常有用,可以大幅度加速你的应用访问速度⚡:
除此之外,如果你不想使用npmmirror
的CDN
源,还可以通过参数快捷设置为jsdelivr
、fastly-jsdelivr
等其他流行的公共CDN
,具体见dash-change-cdn-plugin
文档说明:
Github
仓库:https://github.com/CNFeffery/dash-change-cdn-pluginGitee
镜像同步仓库:https://gitee.com/cnfeffery/dash-change-cdn-plugin
dash-console-filter-plugin
接下来我们要介绍的Dash
插件dash-console-filter-plugin
也非常实用,通过它,我们可以屏蔽指定单个或多个关键词对应的错误信息,令它们不在浏览器控制台中被打印出来,适合屏蔽一些对实际应用功能没有负面影响的冗余提示信息。终端执行下列命令完成安装:
bash
pip install dash-console-filter-plugin -U
举一个常见的简单例子:
python
import dash
from dash import html
import feffery_antd_components as fac
from feffery_dash_utils.style_utils import style
app = dash.Dash(__name__)
app.layout = html.Div(
fac.AntdSelect(
placeholder="请选择", options=list("abcedf"), style=style(width=100)
),
style=style(padding=50),
)
if __name__ == "__main__":
app.run(debug=True)
默认情况下,由于Dash
底层的React
相关参数规范检查机制,上面的示例应用,在浏览器控制台中会显示下图所示的警告信息:
而这类以Warning:
开头的底层React
相关提示信息,对我们的Dash
应用本身并没有什么负面影响,因此可以为Dash
应用启用dash-console-filter-plugin
插件,来过滤一些碍眼的多余错误信息输出:
python
from dash_console_filter_plugin import setup_console_filter_plugin
# 通过keywords参数设置过滤关键字
setup_console_filter_plugin(keywords=["Warning: Each child"])
插件生效后,控制台里就变得清爽多了(建议仅用作屏蔽类似上面例子的无关错误信息):
更多资料具体见dash-console-filter-plugin
文档说明:
Github
仓库:https://github.com/CNFeffery/dash-console-filter-pluginGitee
镜像同步仓库:https://gitee.com/cnfeffery/dash-console-filter-plugin
dash-performance-monitor-plugin
接下来要介绍的Dash
插件dash-performance-monitor-plugin
,适合在Dash
应用的开发调试阶段使用,终端执行下列命令完成安装:
bash
pip install dash-performance-monitor-plugin -U
对于你的任何Dash
应用,额外添加下列代码:
python
# 导入dash-performance-monitor-plugin插件
from dash_performance_monitor_plugin import setup_performance_monitor_plugin
# 启用插件功能
setup_performance_monitor_plugin()
便可以在应用中额外渲染应用性能监控功能,可实时查看当前应用的FPS 、内存占用等性能指标变化情况,适合针对复杂功能应用的调优过程使用:
更多使用说明具体见dash-performance-monitor-plugin
文档说明:
Github
仓库:https://github.com/CNFeffery/dash-performance-monitor-pluginGitee
镜像同步仓库:https://gitee.com/cnfeffery/dash-performance-monitor-plugin
dash-react-scan-plugin
接下来要介绍的Dash
插件dash-react-scan-plugin
同样适用于应用开发阶段的性能调优场景,不同的是其监控的目标不是页面整体性能,而是对页面内全部组件的渲染绘制过程进行监控,适合细粒度的应用调优,以发现局部组件渲染性能问题,终端执行下列命令完成安装:
bash
pip install dash-react-scan-plugin -U
对于你的任何Dash
应用,额外添加下列代码:
python
# 导入dash-react-scan-plugin插件
from dash_react_scan_plugin import setup_react_scan_plugin
# 启用插件功能
setup_react_scan_plugin()
便可以在应用中额外实现对各种组件渲染绘制性能的监控:
更多使用说明具体见dash-react-scan-plugin
文档说明:
Github
仓库:https://github.com/CNFeffery/dash-react-scan-pluginGitee
镜像同步仓库:https://gitee.com/cnfeffery/dash-react-scan-plugin
dash-disable-devtool-plugin
当你不希望自己发布的Dash
应用被访问者通过浏览器开发者工具进行调试和逆向时,就可以使用dash-disable-devtool-plugin
插件,终端执行下列命令完成安装:
bash
pip install dash-disable-devtool-plugin -U
对于你的任何Dash
应用,额外添加下列代码:
python
# 导入dash-disable-devtool-plugin插件
from dash_disable_devtool_plugin import setup_disable_devtool_plugin
# 启用插件功能
setup_disable_devtool_plugin()
便可以为应用快捷开启防调试保护:
除此之外,dash-disable-devtool-plugin
还支持为当前应用快捷开启禁用选择 、禁用复制 等常见安全防护功能,更多使用说明具体见dash-disable-devtool-plugin
文档说明:
Github
仓库:https://github.com/CNFeffery/dash-disable-devtool-pluginGitee
镜像同步仓库:https://gitee.com/cnfeffery/dash-disable-devtool-plugin
dash-offline-detect-plugin
当你希望自己的Dash
应用可以在后端服务临时出现问题时,可以为正在访问应用的用户提供更清晰直观的通知,就可以使用dash-offline-detect-plugin
插件,终端执行下列命令完成安装:
bash
pip install dash-offline-detect-plugin -U
对于你的任何Dash
应用,额外添加下列代码:
python
# 导入dash-offline-detect-plugin插件
from dash_offline_detect_plugin import setup_offline_detect_plugin
# 启用插件功能
setup_offline_detect_plugin()
便可以为正在访问中的应用提供服务宕机通知提示功能:
dash-offline-detect-plugin
支持自定义通知提示内容,更多使用说明具体见dash-offline-detect-plugin
文档说明:
Github
仓库:https://github.com/CNFeffery/dash-offline-detect-pluginGitee
镜像同步仓库:https://gitee.com/cnfeffery/dash-offline-detect-plugin
以上就是本文的全部内容,更多有关Dash
应用实用插件功能的内容,我将会在之后的文章中持续为大家分享介绍~
以上就是本文的全部内容,对Dash
应用开发感兴趣的朋友,欢迎添加微信号CNFeffery
,备注"dash学习"加入我们的技术交流群,一起成长一起进步。