Question

我使用cli工具创建了一个最小的聚合物-2应用程序。没有任何变化，只需运行聚合物服务，首次访问的初始加载时间在Fast3G上为4秒。在聚合物构建之后它仍然是4s。

最重要的是加载shell，聚合物元素，firebase等的html导入的加载时间......

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

我知道我可以加快服务工作人员第二次访问的负担，但第一次来访者总是要耐心等待吗？

这里的代码（聚合物-cli没有变化）

的index.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-应用

<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>

Answer 1

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

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

除非从build-directory加载索引文件，否则捆绑您的应用程序不会起作用。依赖关系（例如来自bower_comonents）将被绑定到构建的src子文件夹中的app元素中，这会导致使用uglified代码的请求更少 - 这意味着您通过网络发送更少的字节。上面提到的Out工具通过捆绑减掉了大约50％的重量，只加载了15个请求。

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

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

初始聚合物的加载时间本身就很慢

1 个答案: