企业官网建设流程全解析

从CefSharp迁移到WebView2：WPF项目实战深度解析

当微软在2020年推出基于Chromium的Edge浏览器时，很多.NET开发者就开始关注其嵌入式组件WebView2的进展。作为长期使用CefSharp的老牌WPF开发者，我在最近一个企业级项目中完成了从CefSharp到WebView2的完整迁移，这个过程充满了技术决策的权衡和实际问题的解决。本文将分享第一手的迁移经验，包括你可能遇到的"坑"和性能优化的关键点。

1. 技术选型：为什么选择WebView2？

在决定迁移之前，我们需要明确几个核心考量因素。WebView2作为微软官方维护的嵌入式浏览器控件，与CefSharp这样的第三方解决方案相比，具有几个显著优势：

安装包体积对比：

• CefSharp典型部署：120-150MB（包含完整Chromium二进制文件）
• WebView2典型部署：1.5-2MB（仅需引导安装程序）

内存占用实测数据（相同网页加载条件下）：

提示：实际内存节省取决于具体使用场景，多Tab应用效果更明显

从架构角度看，WebView2采用了运行时共享模型。当系统已安装Edge(Chromium)或WebView2 Runtime时，多个应用可以共享同一个浏览器进程，这与CefSharp每个应用独立加载完整Chromium的方式形成鲜明对比。

2. 迁移准备：环境配置要点

2.1 开发环境搭建

对于WPF项目，首先需要确保开发环境正确配置：

<PackageReference Include="Microsoft.Web.WebView2" Version="1.0.1587.40" />

关键依赖项：

• .NET Framework 4.6.2+ 或 .NET Core 3.1+
• Visual Studio 2019 v16.11+ 或 VS2022
• WebView2运行时（三种获取方式）：
  1. 安装Microsoft Edge (Chromium)稳定版
  2. 单独安装WebView2 Runtime
  3. 嵌入固定版本运行时（不推荐）

2.2 初始化模式选择

WebView2提供两种初始化方式，各有适用场景：

隐式初始化（适合简单场景）：

<wv2:WebView2 Source="https://app.startpage" />

显式初始化（推荐生产环境使用）：

private async Task InitializeWebView() { var env = await CoreWebView2Environment.CreateAsync( userDataFolder: GetCachePath(), options: new CoreWebView2EnvironmentOptions { AdditionalBrowserArguments = "--disable-features=msSmartScreenProtection" }); await webView.EnsureCoreWebView2Async(env); webView.CoreWebView2InitializationCompleted += OnCoreWebView2Ready; }

常见初始化陷阱：

1. 直接访问CoreWebView2属性可能为null
2. 未正确处理异步初始化流程
3. 用户数据目录权限问题

3. 核心功能迁移指南

3.1 通信机制对比实现

CefSharp与WebView2在JS互操作方面有显著差异：

CefSharp方案：

// C#注册对象 browser.JavascriptObjectRepository.Register("boundObj", new BoundObject(), true); // JS调用 boundObj.methodName(param);

WebView2方案：

[ComVisible(true)] public class BridgeObject { public string ProcessData(string input) { return input.ToUpper(); } } // 注册对象 webView.CoreWebView2.AddHostObjectToScript("bridge", new BridgeObject()); // JS调用 const result = await chrome.webview.hostObjects.bridge.ProcessData("test");

关键差异点：

• WebView2要求明确的COM可见性
• 所有调用默认异步执行
• 需要处理跨线程封送

3.2 常用功能配置对照

4. 实战踩坑与解决方案

4.1 WPF渲染层级问题

最著名的WPF兼容性问题就是Z-order渲染异常。现象表现为：

• WebView2总是显示在最顶层
• 遮挡其他WPF控件（如弹出菜单、对话框）
• 影响视觉交互体验

临时解决方案：

// 在需要显示覆盖控件时 webView.IsVisible = false; // 关闭覆盖控件后 webView.IsVisible = true;

注意：此方案会导致网页内容重新加载，影响用户体验

官方修复方案：

1. 升级到WebView2 SDK 1.0.1185.39+
2. 设置以下属性：

webView.DefaultBackgroundColor = Colors.Transparent;

4.2 内存泄漏预防

WebView2虽然内存占用更优，但仍需注意：

protected override void OnClosed(EventArgs e) { // 必须手动清理 webView.CoreWebView2?.Stop(); webView.Dispose(); base.OnClosed(e); }

常见泄漏点：

• 未注销的事件处理器
• 未释放的宿主对象
• 未清理的用户数据目录

4.3 部署策略优化

推荐的分发方案：

1. 检测运行时环境：

public static bool IsWebView2Available() { try { var version = CoreWebView2Environment.GetAvailableBrowserVersionString(); return !string.IsNullOrEmpty(version); } catch { return false; } }

2. 静默安装引导：

$installer = Join-Path $PSScriptRoot "MicrosoftEdgeWebview2Setup.exe" Start-Process $installer -ArgumentList "/silent /install" -Wait

3. 增量更新机制：

• 利用Evergreen Bootstrapper
• 定期检查运行时更新
• 后台静默下载

5. 高级功能实现技巧

5.1 性能监控与优化

// 启用性能收集 webView.CoreWebView2.Profile.GetProcessInfos(); // 内存压力事件 webView.CoreWebView2.MemoryUsageTargetLevelChanged += (s, e) => { var level = webView.CoreWebView2.MemoryUsageTargetLevel; // 根据内存压力调整行为 };

优化建议：

• 合理设置MemoryUsageTargetLevel
• 监控ProcessInfos中的内存数据
• 及时释放闲置实例

5.2 自定义资源拦截

webView.CoreWebView2.AddWebResourceRequestedFilter("*", CoreWebView2WebResourceContext.All); webView.CoreWebView2.WebResourceRequested += (s, e) => { if (e.Request.Uri.Contains("adserver")) { e.Response = webView.CoreWebView2.Environment.CreateWebResourceResponse( null, 404, "Blocked", ""); } };

应用场景：

• 广告拦截
• 本地资源替换
• 请求修改

5.3 多进程管理

WebView2的进程模型与CefSharp不同：

• 默认共享浏览器进程
• 可创建独立环境实例

var independentEnv = await CoreWebView2Environment.CreateAsync( userDataFolder: isolatedPath, browserExecutableFolder: customBrowserPath);

适用场景：

• 需要不同Cookie容器的场景
• 特殊安全要求的模块
• 插件隔离需求

6. 迁移决策建议

经过完整项目迁移后，我的实践建议是：

适合迁移的场景：

• 新启动的现代化项目
• 对安装包大小敏感的应用
• 需要长期维护的企业级产品
• 多实例运行的业务系统

暂缓迁移的情况：

• 深度依赖CefSharp特有API
• 需要支持Windows 7的遗留系统
• 项目即将结束生命周期

在性能关键型应用中，我们实测的指标对比：

这些数据来自实际电商后台管理系统，包含复杂的前端SPA交互。