docs: document devtools in production

Author: TkDodo

docs/devtools.md

@@ -87,3 +87,47 @@ Use these options to style the dev tools.
   - The standard React style object used to style a component with inline styles
 - `className: string`
   - The standard React className property used to style a component with classes
+
+## Devtools in production
+
+Devtools are excluded in production builds. However, it might be desirable to lazy load the devtools in production:
+
+```tsx
+import * as React from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { Example } from './Example'
+
+const queryClient = new QueryClient()
+
+const ReactQueryDevtoolsProduction = React.lazy(() =>
+    import('@tanstack/react-query-devtools/build/lib/index.prod.js').then(d => ({
+          default: d.ReactQueryDevtools
+    }))
+)
+
+function App() {
+    const [showDevtools, setShowDevtools] = React.useState(false)
+
+    React.useEffect(() => {
+        // @ts-ignore
+        window.toggleDevtools = () => setShowDevtools(old => !old)
+    }, [])
+
+    return (
+        <QueryClientProvider client={queryClient}>
+            <Example />
+            <ReactQueryDevtools initialIsOpen />
+            { showDevtools && (
+                <React.Suspense fallback={null}>
+                    <ReactQueryDevtoolsProduction />
+                </React.Suspense>
+            )}
+        </QueryClientProvider>
+    );
+}
+
+export default App
+```
+
+With this, calling `window.toggleDevtools()` will download the devtools bundle and show them.