Начальное время загрузки полимера по своей сути медленное

Я создал минимальное приложение polymer-2 с помощью инструмента cli. Без каких-либо изменений, только при использовании полимерной подачи, начальное время загрузки для первого посещения Fast3G составляет 4 с. Это остается 4s также после наращивания полимера.

Вверху - время загрузки любого html-импорта для оболочки, полимерных элементов, базы огня,...

Должен ли я просто принять время загрузки 4s + и использовать загрузчик в index.html, рендеринге на сервере и amp или некоторых других обходных путях, или я что-то упустил?

Я знаю, что могу ускорить загрузку второго визита с работником службы, но при первом посещении всегда нужно быть терпеливым?

Здесь код (без изменений от полимера-кли)

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>
Источник

1 ответ

По умолчанию Polymer загружает свои зависимости произвольно в виде отдельных файлов, что приводит к загрузке в течение нескольких секунд - обратите внимание на "водопад" на вкладке "Сеть" вашего Dev Tools. Например, один из наших инструментов при запуске делает более 100 запросов на загрузку зависимостей, таких как элементы.

Отсутствие работника службы, рендеринг на стороне сервера, кэширование на стороне клиента и т. П. Приведет к сопоставимому времени загрузки при последующих загрузках страниц.

Комплектация вашего приложения не повлияет на это, если вы не загрузите индексный файл из директории сборки. Зависимости (например, от bower_comonents) будут вставлены в элементы вашего приложения в подпапке src вашей сборки, что приведет к меньшему количеству запросов с помощью кода с расширенными кодами - что означает, что вы будете отправлять меньше байтов по проводам. Наш инструмент, упомянутый выше, теряет около 50% своего веса при связывании, делая только 15 запросов на загрузку.

Образец изображения https://imgur.com/a/g9UPM

Независимо от комплектации вы должны по крайней мере позаботиться о кэшировании, настроив свой сервер, или, возможно, использовать работника сервиса. При запуске NodeJS вы можете взглянуть на https://github.com/Polymer/prpl-server-node.

Источник
Другие вопросы по тегам