0

我使用 cli 工具创建了一个最小的 polymer-2-application。不做任何改动，只运行polymer serve，在Fast3G上第一次访问的初始加载时间是4s。在聚合物构建后它也保持 4 秒。

最重要的是任何 html 导入的加载时间，用于外壳、聚合物元素、firebase ......

我是否只需要接受 4s+ 的加载时间并在 index.html 中使用加载程序、服务器端渲染和 amp 或其他一些解决方法，还是我错过了什么？

我知道我可以加快服务人员第二次访问的负载，但第一次访问者总是需要耐心？

这里是代码（从聚合物 cli 没有变化）

索引.html：

<!DOCTYPE html><html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

        <title>polymer_min.</title>
        <meta name="description" content="testing minimal loading time for Polymer app">

        <link rel="manifest" href="/manifest.json">

        <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>

        <link rel="import" href="/src/polymer_min-app/polymer_min-app.html
    </head>
    <body>
        <polymer_min-app></polymer_min-app>
    </body>
</html>

Polymer_min-app

<link rel="import" href="../../bower_components/polymer/polymer-element.html">

<dom-module id="polymer_min-app">
    <template>
        <style>
            :host {
                display: block;
            }
        </style>
        <h2>Hello [[prop1]]!</h2>
    </template>

    <script>
        class Polymer_minApp extends Polymer.Element {
            static get is() { return 'polymer_min-app'; }
            static get properties() {
                return {
                    prop1: {
                        type: String,
                        value: 'polymer_min-app'
                    }
                };
            }
        }

        window.customElements.define(Polymer_minApp.is, Polymer_minApp);
    </script>
</dom-module>
4

1 回答 1

0

默认情况下，Polymer 将其依赖项任意加载为单独的文件，这会导致几秒钟的加载时间 - 请注意开发工具的网络选项卡中的“瀑布”。例如，我们的一个工具在启动时会发出 100 多个请求来加载依赖项（如元素）。

不使用服务工作者、服务器端渲染、客户端缓存等将导致后续页面加载的加载时间相当。

除非您从构建目录加载索引文件，否则捆绑您的应用程序不会产生影响。依赖项（例如来自 bower_comonents）将被烘焙到您构建的 src 子文件夹中的应用程序元素中，这会导致使用丑陋代码的请求更少 - 这意味着您通过网络发送的字节更少。上面提到的 Out 工具通过捆绑减轻了大约 50% 的重量，负载时只发出 15 个请求。

示例图片https://imgur.com/a/g9UPM

独立于捆绑，您至少应该通过配置服务器来处理缓存，或者使用服务工作者。运行 NodeJS 时，您可能会查看https://github.com/Polymer/prpl-server-node。

于 2017-11-02T09:47:34.693 回答