Python全栈应用开发利器Dash 3.x新版本介绍（5）

更多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-hooks
• Gitee镜像同步仓库：https://gitee.com/cnfeffery/awesome-dash-hooks

dash-change-cdn-plugin

首先我们要介绍的Dash插件dash-change-cdn-plugin，对于需要通过互联网部署Dash应用的朋友非常的有用，终端执行下列命令完成插件的安装，跟常规的Python包安装没有区别：

pip install dash-change-cdn-plugin -U

举一个非常简单的Dash应用示例：

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()

其中最关键的代码只有下面这行：

# 启用插件功能
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-plugin
• Gitee镜像同步仓库：https://gitee.com/cnfeffery/dash-change-cdn-plugin

dash-console-filter-plugin

接下来我们要介绍的Dash插件dash-console-filter-plugin也非常实用，通过它，我们可以屏蔽指定单个或多个关键词对应的错误信息，令它们不在浏览器控制台中被打印出来，适合屏蔽一些对实际应用功能没有负面影响的冗余提示信息。终端执行下列命令完成安装：

pip install dash-console-filter-plugin -U

举一个常见的简单例子：

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插件，来过滤一些碍眼的多余错误信息输出：

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-plugin
• Gitee镜像同步仓库：https://gitee.com/cnfeffery/dash-console-filter-plugin

dash-performance-monitor-plugin

接下来要介绍的Dash插件dash-performance-monitor-plugin，适合在Dash应用的开发调试阶段使用，终端执行下列命令完成安装：

pip install dash-performance-monitor-plugin -U

对于你的任何Dash应用，额外添加下列代码：

# 导入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-plugin
• Gitee镜像同步仓库：https://gitee.com/cnfeffery/dash-performance-monitor-plugin

dash-react-scan-plugin

接下来要介绍的Dash插件dash-react-scan-plugin同样适用于应用开发阶段的性能调优场景，不同的是其监控的目标不是页面整体性能，而是对页面内全部组件的渲染绘制过程进行监控，适合细粒度的应用调优，以发现局部组件渲染性能问题，终端执行下列命令完成安装：

pip install dash-react-scan-plugin -U

对于你的任何Dash应用，额外添加下列代码：

# 导入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-plugin
• Gitee镜像同步仓库：https://gitee.com/cnfeffery/dash-react-scan-plugin

dash-disable-devtool-plugin

当你不希望自己发布的Dash应用被访问者通过浏览器开发者工具进行调试和逆向时，就可以使用dash-disable-devtool-plugin插件，终端执行下列命令完成安装：

pip install dash-disable-devtool-plugin -U

对于你的任何Dash应用，额外添加下列代码：

# 导入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-plugin
• Gitee镜像同步仓库：https://gitee.com/cnfeffery/dash-disable-devtool-plugin

dash-offline-detect-plugin

当你希望自己的Dash应用可以在后端服务临时出现问题时，可以为正在访问应用的用户提供更清晰直观的通知，就可以使用dash-offline-detect-plugin插件，终端执行下列命令完成安装：

pip install dash-offline-detect-plugin -U

对于你的任何Dash应用，额外添加下列代码：

# 导入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-plugin
• Gitee镜像同步仓库：https://gitee.com/cnfeffery/dash-offline-detect-plugin

---

以上就是本文的全部内容，更多有关Dash应用实用插件功能的内容，我将会在之后的文章中持续为大家分享介绍~

---

以上就是本文的全部内容，对Dash应用开发感兴趣的朋友，欢迎添加微信号CNFeffery，备注“dash学习”加入我们的技术交流群，一起成长一起进步。