Flutter Web Github Pages 太懒了不知道为什么答案

【问题标题】：Flutter Web Github Pages is too lazy and i don't know whyFlutter Web Github Pages 太懒了不知道为什么
【发布时间】：2021-10-19 15:13:44
【问题描述】：

我正在尝试将 Flutter Web 应用程序部署到 GitHub Pages。

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

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

有没有办法更快地启动网站？我该怎么办？

【问题讨论】：

是的。加载 Flutter Web 应用程序需要一些时间。您可以添加一个加载器，直到它没有完全加载。
感谢您的评论 :)

标签： html flutter dart github-pages flutter-web

【解决方案1】：

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

【讨论】：

感谢您的回答！确实这是我必须习惯的东西。

【解决方案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，这很适合我。

【讨论】：