Flutter Web Github Pages 太懒了，我不知道为什么

Question

我正在尝试将 flutter web 应用程序部署到 GitHub 页面。

首先，我遇到了与相同的问题，他们的解决方案也适用于我。这意味着我将 <base href='/web'> 添加到我的 index.html

但是现在，当我从 GitHub 页面启动我的 url 时，网站加载太慢，我认为这不是正确的行为。如下图所示：

有什么方法可以更快地启动网站吗？我该怎么办？

Answer 1

一般来说，网站加载时间与包大小有关。 Flutter web 应用程序往往有很大的包，因此加载时间不可避免地会比使用其他技术构建的网站更长。

Answer 2

所以，我正在搜索，一位朋友发现 index.html 文件中的 serviceWorker 是问题所在。现在，我的应用程序运行速度达到了应有的速度。

显然，该函数试图执行某些操作但失败了（但此失败耗时 4 秒，代码中规定）。所以我评论了这一切并在开始时添加了一个 loadMainDartJs() 调用，如下所示：

    loadMainDartJs();

<!--    if ('serviceWorker' in navigator) {-->
<!--      // Service workers are supported. Use them.-->
<!--      window.addEventListener('load', function () {-->
<!--        // Wait for registration to finish before dropping the <script> tag.-->
<!--        // Otherwise, the browser will load the script multiple times,-->
<!--        // potentially different versions.-->
<!--        var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;-->
<!--        navigator.serviceWorker.register(serviceWorkerUrl)-->
<!--          .then((reg) => {-->
<!--            function waitForActivation(serviceWorker) {-->
<!--              serviceWorker.addEventListener('statechange', () => {-->
<!--                if (serviceWorker.state == 'activated') {-->
<!--                  console.log('Installed new service worker.');-->
<!--                  loadMainDartJs();-->
<!--                }-->
<!--              });-->
<!--            }-->
<!--            if (!reg.active && (reg.installing || reg.waiting)) {-->
<!--              // No active web worker and we have installed or are installing-->
<!--              // one for the first time. Simply wait for it to activate.-->
<!--              waitForActivation(reg.installing ?? reg.waiting);-->
<!--            } else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {-->
<!--              // When the app updates the serviceWorkerVersion changes, so we-->
<!--              // need to ask the service worker to update.-->
<!--              console.log('New service worker available.');-->
<!--              reg.update();-->
<!--              waitForActivation(reg.installing);-->
<!--            } else {-->
<!--              // Existing service worker is still good.-->
<!--              console.log('Loading app from service worker.');-->
<!--              loadMainDartJs();-->
<!--            }-->
<!--          });-->

<!--        // If service worker doesn't succeed in a reasonable amount of time,-->
<!--        // fallback to plaint <script> tag.-->
<!--        setTimeout(() => {-->
<!--          if (!scriptLoaded) {-->
<!--            console.warn(-->
<!--              'Failed to load app from service worker. Falling back to plain <script> tag.',-->
<!--            );-->
<!--            loadMainDartJs();-->
<!--          }-->
<!--        }, 4000);-->
<!--      });-->
<!--    } else {-->
<!--      // Service workers not supported. Just drop the <script> tag.-->
<!--      loadMainDartJs();-->
<!--    }-->

目前我不需要 serviceWork，这很适合我。

Flutter Web Github Pages 太懒了，我不知道为什么

Flutter Web Github Pages is too lazy and i don't know why

html

dart

github-pages

flutter

flutter-web