Black Lives Matter. Please consider donating to Black Girls Code today.

Dash slow to reload

Hi all,

My only real issue with Dash at the moment, is how long, after making code edits, it takes to reload the page - which seems to be somewhere between 10 and 15 seconds on average.

I have disabling debug mode, and then restarted after code edits, but again, its super slow to load.

I am just wondering if other people are having this issue and have any ideas?? I am really loving this framework, would be awesome if there was a fix for this issue.

Thanks, Jamie

Hm, I’m not sure what’s going on here. It takes my machine about 5-10 seconds to do a reload. I recommend keeping debug mode on - I’m pretty sure that this will be faster for code edits.

If you’re in slow internet, you can try serving the JS and CSS assets locally instead of through the global CDN. See https://plot.ly/dash/external-resources for more:

app.css.config.serve_locally = True
app.scripts.config.serve_locally = True

I’d also make sure that your browser’s cache isn’t disabled.

Eventually, I’d like to have hot-reloading in Dash, so you that you don’t even need to refresh your browser. We’re looking for a company to help sponsor that work (https://plot.ly/products/consulting-and-oem/).

Thanks Chris! Hot reloading does sound like a cool option for this.

As a workaround, I was trying to have everything serve locally and was reading the related doc, but wasn’t sure what you meant by “These files are stored as part of the component’s site-packages folder” - do you mean it will look in a site-packages folder in your app directory if serve locally is set to True?

Thanks again

By “site-packages” I mean that the the JS and CSS bundles that are required to render the components in that package will be installed as part of the python package itself. The location where Python packages are installed is usually in a folder called “site-packages”. You don’t have to create any folders themselves, just setting serve_locally=True will discover where the JS and CSS bundles are on your computer (in your python packages folder) and serve them.


Another solution that I just thought of is to use the live-reloading to your advantage and display your layout as the children of some component. Here’s a quick example and a screencast.

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()
app.config.supress_callback_exceptions=True

app.layout = html.Div([
    dcc.RadioItems(
        id='toggle-content',
        value='show',
        options=[{'value': i, 'label': i} for i in ['show', 'hide']]
    ),
    html.Div(id='my-content')
])

# Edit your markup here
layout = html.Div([
    html.H1('Dash Test Example!!'),
    dcc.Graph(id='my-graph', figure={'data': [{'x': [1, 2, 3], 'y': [3, 1, 100]}]})
])

# toggle the radio items to refresh content
@app.callback(
    dash.dependencies.Output('my-content', 'children'),
    [dash.dependencies.Input('toggle-content', 'value')])
def display_content(value):
    if value == 'show':
        return layout
    else:
        return html.Div()


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

This gets around the lag of the full page reload. When you’re done prototyping, you can just remove the radio items and place set app.layout = layout.

Oh those site-packages! - sorry, of course, I get it now, thanks.
And nice alternate solution too man - that is a cool idea

Another community member asked about this and I came up with a slightly better solution. Reloading takes about 2 seconds or so and doesn’t require switching browsers.

For the code and future updates, see this issue: https://github.com/plotly/dash/issues/66

2 Likes

oh that is very cool - nice one