如何将Dash应用切换为本地资源加载，移除unpkg.com依赖？

我之前刚好做过完全离线运行Dash应用的需求，把所有unpkg的依赖都换成了本地资源，给你整理下具体的解决步骤和关键配置：

1. 先把需要的前端资源下载到本地 #

Dash默认会从unpkg拉取大量前端资源（比如React、ReactDOM、Plotly.js，还有你用到的各种组件库的CSS/JS文件），第一步就是把这些资源下载到你的项目目录里。

建议在项目根目录创建一个assets文件夹——Dash默认会自动扫描这个文件夹加载静态资源，你还可以在里面分js、css子文件夹分类存放，方便管理。

你可以直接从unpkg对应的包页面下载对应版本的文件，比如：

• React生产版：react@x.x.x/umd/react.production.min.js
• ReactDOM生产版：react-dom@x.x.x/umd/react-dom.production.min.js
• Plotly.js：plotly.js@x.x.x/dist/plotly.min.js
• 如果你用了dash-bootstrap-components，还要下载它的CSS文件：dash-bootstrap-components@x.x.x/dist/dash-bootstrap-components.min.css

注意：一定要下载和你的Dash版本兼容的资源版本，不然可能会出现兼容性问题。比如Dash 2.x通常对应React 18.x，Plotly.js的版本也可以在Dash的依赖文件里找到。

2. 配置Dash应用，替换外部资源路径 #

在你的Dash应用代码里，需要手动指定external_scripts和external_stylesheets为本地相对路径，替代默认的CDN地址。

举个实际的代码例子：

import dash
from dash import html

# 初始化Dash应用，明确指定assets文件夹路径（用默认的话可以省略，但写出来更清晰）
app = dash.Dash(
    __name__,
    assets_folder='assets',
    # 把原来的CDN脚本替换成本地路径
    external_scripts=[
        '/assets/js/react.production.min.js',
        '/assets/js/react-dom.production.min.js',
        '/assets/js/plotly.min.js'
    ],
    # 把原来的CDN样式替换成本地路径
    external_stylesheets=[
        '/assets/css/dash-bootstrap-components.min.css'
    ]
)

# 你的应用布局
app.layout = html.Div([
    html.H1("完全本地运行的Dash数据展示应用"),
    # 这里添加你的数据展示组件
])

if __name__ == '__main__':
    app.run_server(debug=True)

3. 处理组件库的内部隐式依赖 #

有些Dash组件库（比如dash-table、dash-core-components）可能内部会偷偷引用unpkg的资源，这时候你需要额外处理：

• 找到组件对应的JS/CSS文件，下载到本地assets文件夹
• 在external_scripts或external_stylesheets里添加这些本地路径
• 如果你遇到组件加载失败的情况，可以打开浏览器开发者工具（F12）的“网络”标签，看看哪个资源还是在请求unpkg，然后针对性下载并替换路径

4. 验证配置是否成功 #

启动应用后，打开浏览器的开发者工具，切换到“网络”标签，刷新页面：

• 检查所有资源的请求地址都是http://localhost:8050/assets/xxx这类本地路径
• 没有任何指向unpkg.com的请求，就说明配置成功了

官方文档参考位置 #

Dash官方文档里的这几个章节有详细说明：

• Adding CSS & JS and Overriding the Page-Load Template：讲解了assets_folder的配置，以及如何自定义页面模板来完全控制资源加载逻辑
• External Resources：详细说明了external_scripts和external_stylesheets的用法，包括本地路径的配置方式
• Offline Mode：如果需要更深度的离线配置（比如打包成桌面应用），这个章节会有专门的指引

内容的提问来源于stack exchange，提问作者JsR