Flutter web build 把 canvaskit 转为本地 URL今天有用户反馈，网页登录慢，卡在登录页进不去

今天有用户反馈，网页登录慢，卡在登录页进不去。盲猜又是 gstatic 的问题，前几天解决了字体下载，以为 canvaskit 不大，不需要管了。还是小看东大局域网了。

那就解决吧。

方法 1

首先能找到的一个方案是把 canvaskit 提前下好，放在资源目录中。然后打包时指定引擎目录。

详细见这篇我把FlutterWeb渲染模式改成Canvaskit后...用FLutterWeb开发的网站在使用过程中出现了一些问题 - 掘金

文章有些久了，文中提到的链接格式 https://unpkg.com/canvaskit-wasm@0.35.0/bin/canvaskit.wasm 现在已经变成了 https://www.gstatic.com/flutter-canvaskit/b8800d88be4866db1b15f8b954ab2573bba9960f/chromium/canvaskit.js。

我没搞清楚这里 md5 代表什么的版本号，但是通过与前两天的包的对比，它确实是在变化的。难道每次打包都去看一下这个地址吗？遂放弃这个方案。

方法 2

之前打包时看到过一个奇特的现象，每次生成文件目录中都包含了 canvaskit，只是运行时并未使用。

这是否意味着，本地 canvaskit 是一个可选项呢？全文搜索后，我找到了一些佐证：

关键字就是这个 canvasKitBaseUrl 了，顺藤摸瓜，很容易找到： flutter web loading canvaskit locally - Stack Overflow

以及官方文档的解释：Flutter web app initialization | Flutter

通过自定义 bootstrap 的方式，确实可以实现 canvaskit 本地 URL。

第一步，修改 index.html 文件，替换 bootstrap 脚本

<html>
  <body>
    <!-- <script src="flutter_bootstrap.js" async></script> -->
    <script>
      {{flutter_bootstrap_js}}
    </script>
  </body>
</html>

第二步，自己实现 flutter_bootstrap.js，将 canvasKitBaseUrl 设置为 /canvaskit/。我这里顺便加了一个加载中的文字说明


{{flutter_js}}
{{flutter_build_config}}

const loading = document.createElement('div');
document.body.appendChild(loading);
loading.textContent = "Loading Entrypoint...";
_flutter.loader.load({
    config: { 'canvasKitBaseUrl': '/canvaskit/' },
    onEntrypointLoaded: async function (engineInitializer) {
        loading.textContent = "Initializing engine...";
        const appRunner = await engineInitializer.initializeEngine();

        loading.textContent = "Running app...";
        await appRunner.runApp();
    },
});

但这里我踩了一个坑，代码自动格式化时会导致双括号内加空格，这会使标记语言失效，导致如下报错：

Uncaught ReferenceError: flutter_bootstrap_js is not defined

解决后，就一切正常了。

最后，欢迎访问、提建议：p1gd0g.cc