VSCode 扩展开发 - 当我从另一个 vscode 选项卡返回焦点时，我的扩展 webview 会重新加载

Question

我正在开发一个 vscode 与 webview 一起使用的扩展，我是 vscode 扩展和网络开发的新手。

我用 svelte 制作了一个 webview，但每次我切换到另一个选项卡并返回到我的 webview 的选项卡时，所有内容都会重新加载。我通过一个函数生成了 webview 的 html，该函数还加载了在 svelte 中制作的编译组件。

function getGenericHTML(_webview: vscode.Webview, _extensionUri: vscode.Uri , _compiledElementName:string) : string {
    // Local path to css styles in media folder
    const stylesResetUri = _webview.asWebviewUri(vscode.Uri.joinPath(_extensionUri,"media","reset.css"));
    const stylesMainUri = _webview.asWebviewUri(vscode.Uri.joinPath(_extensionUri,"media","vscode.css"));
    const stylesBootstrap = _webview.asWebviewUri(vscode.Uri.joinPath(_extensionUri,"media","bootstrap.min.css"));
    const scriptBootstrap = _webview.asWebviewUri(vscode.Uri.joinPath(_extensionUri,"media","bootstrap.bundle.min.js"));
  
    // Svelte compiled elements
    const scriptUri = _webview.asWebviewUri(vscode.Uri.joinPath(_extensionUri, "out", "compiled", _compiledElementName + ".js"));
    const cssUri = _webview.asWebviewUri(vscode.Uri.joinPath(_extensionUri, "out", "compiled", _compiledElementName + ".css"));

    // Use a nonce to only allow specific scripts to be run
    const nonce = getNonce();

    return `<!DOCTYPE html>
            <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <meta http-equiv="Content-Security-Policy" content="img-src https: data:; style-src 'unsafe-inline' ${ _webview.cspSource }; script-src 'nonce-${nonce}';">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <link href="${stylesBootstrap}" rel="stylesheet" integrity=${"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"} crossorigin="anonymous">
                    <link href="${stylesResetUri}" rel="stylesheet">
                    <link href="${stylesMainUri}" rel="stylesheet">
                    <link href="${cssUri}" rel="stylesheet">
                    <script nonce="${nonce}">
                        tsvscode = acquireVsCodeApi();
                    </script>
                </head>
                <body>
                </body>
                <script nonce="${nonce}" src="${scriptUri}"></script>
                <script nonce="${nonce}" src="${scriptBootstrap}" integrity=${"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"} crossorigin="anonymous"></script>
            </html>`;
}

我需要声明文件执行一次？我错过了什么？有人有什么建议吗？

扩展的完整代码在 github: https://github.com/ArkoMO93/al-translations.git

提前致谢

Answer 1

这是设计使然。如果 webview 不可见，VS Code 会销毁它以回收内存。当 webview 再次可见时，它会自动重新创建。有关如何在卸载和重新加载之间保留状态的详细信息，请参阅 https://code.visualstudio.com/api/extension-guides/webview#persistence

如果这对您的用例不起作用，您可以在 WebviewPanelOptions 中启用 retainContextWhenHidden。不过，只有在绝对需要时才这样做

VSCode 扩展开发 - 当我从另一个 vscode 选项卡返回焦点时，我的扩展 webview 会重新加载

VSCode Extension Development - My extension webview reload when i come back with focus from another vscode tab

vscode-extensions

svelte