html - 我是偏执狂吗？ "Brutally"硫化后的大 polymer 网站。我能做些什么来修复它？

Question

也许我是偏执狂。我总是喜欢让我的代码尽可能精简。我总是将我的网站目标定在 1.5 MB 以下(所有图像都根据需要压缩和调整大小(。我在一个月前开始使用 Polymer，我认为我可以从 Bootstrap 中减少 150 KB，从 jQuery 中减少 90 KB，并且有一个相对轻量级的网站。

我刚刚硫化了我的 elements.html 文件，我吓坏了。野兽是 947KB，没有图像，只有裸 HTML 和 JS。我有大约 40 个自定义元素 + 几个元素目录(我什至还没有接近创建新元素)。 (GZip 是 947KB 中的 307.40 KB)(使用 ASP.NET MVC5 和 .NET 4.6)。

使用常规 3G 连接，在 Chrome 52 中加载大约需要 5.15 秒(这太糟糕了)。 Polymer Shop 演示加载速度非常快(在常规 3G 中从冷缓存中加载 <3 秒)

首先，这是可以接受的吗？我试图在 3 秒标记之前击中(或尽可能接近它)。

另外，有许多我不需要的 Vulcanize 加载的 JavaScript 文件。

我看过这个要点:Vulcanize and Polymer auto Lazy Loading但我不知道该怎么办。

这些是我的 elements.html 文件的导入:

<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/app-route/app-location.html">


<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">

<link rel="import" href="./pgarena-drawer/pgarena-drawer.html">
<link rel="import" href="./pgarena-navbar/pgarena-navbar.html">
<link rel="import" href="./pgarena-auth/pgarena-oauth/pgarena-oauth.html">

<link rel="import" href="./routes/pgarena-app.html">

然后我所有的自定义元素 (pgarena) 都内置了更多的 polymer 组件。

我已经尝试了几种组合(仅使用我的元素)和(仅使用显示的 polymer 元素)并且我得到了不同的结果(如预期的那样)

我不知道该怎么做......在求助于一个骇人听闻的东西之前......有什么建议吗？

Answer 1

好的，各位，耐心等待。这将是一个很长的答案。它可能会变得有点毛茸茸。首先，这是一个 Polymer 1.x 解决方案。我不知道 2.0 版本有什么变化

长话短说:我们获取 .HTML 的 URL 并使用 JavaScript 创建 link 属性(HTML 导入)以加载元素。我们使用 Polymer.isInstance(element) 检查 Polymer 是否已设置对象。

代码如下:

为此，我使用了 iron-pages 和自定义 JavaScript。

我们有我们的应用程序，如下所示:

注意*:下面的代码我放在同一个文件里，你可以随意分开。

<!-- Main Entry point for the application. This will work as the main "Controller"-->

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

<link rel="import" href="../../bower_components/app-route/app-location.html">
<link rel="import" href="../../bower_components/app-route/app-route.html">
<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
<dom-module id="pgarena-app">
    <template>
        <pgarena-action-config></pgarena-action-config>
        <app-route route="{{route}}"
                   pattern="/:page"
                   data="{{data}}"
                   tail="{{tail}}">
        </app-route>
        <iron-pages selected="[[data.page]]" attr-for-selected="title" fallback-selection="404">
            <pgarena-home-app title="" route="[[tail]]"></pgarena-home-app>
            <pgarena-tournament-app title="tournaments" route="[[tail]]"></pgarena-tournament-app>
            <!--<pgarena-clash-app title="clash" route="[[tail]]"></pgarena-clash-app>-->
            <pgarena-account-app title="account" route="[[tail]]"><content></content></pgarena-account-app>
            <pgarena-teams-app title="teams" route="[[tail]]"></pgarena-teams-app>
            <div title="404">
                <h1>{{data.page}} could not be found!</h1>
            </div>
        </iron-pages>

    </template>
    <script>
        (function () {
            'use strict';
            Polymer({
                is: 'pgarena-app',
                ready: function () {
                    /* console.log("Route is ");
                     console.log(this.data.page);
                    console.log(this.tail);*/
                    document.addEventListener('iron-select',
                        function (event) {
                            /*
                            console.log("---------------------");
                            console.log(event);
                            console.log("---------------------");*/
                            var element = getSelectedElement(event);
                            var tagName = element.tagName.toLowerCase();
                            LazyLoad(Polymer, element, tagName, event.target);
                        });
                }
            });
        })();

    </script>

让我们先得到一些东西:

1. 我的应用名为:“pgarena-app”
2. 我不知道这个问题是否已修复，但 app-route 元素在双向数据绑定(bind)方面存在问题。这意味着对于铁页，我必须使用双括号 [[]] 进行单向数据绑定(bind)。
3. 应用程序路由将信息从 url 传递到 iron-pages，以便它可以切换不同的元素。
4. 这不是强制性的，我不知道这样做是否正确。我将我的应用程序分为“ View ”，它们本身就是元素。他们加载该“ View ”所需的所有元素。 注意:这对延迟加载没有影响。

请注意，这些元素不包含在 URL 中，因为我们将延迟加载它们。

让我们转到此元素的 JavaScript 部分:

<script>
    (function () {
        'use strict';
        Polymer({
            is: 'pgarena-app',
            ready: function () {

                document.addEventListener('iron-select',
                    function (event) {

                        var element = getSelectedElement(event);
                        var tagName = element.tagName.toLowerCase();
                        LazyLoad(Polymer, element, tagName, event.target);
                    });
            }
        });
    })();

</script>

这里的代码很简单。我们定义我们的元素，然后我们监听 iron select 事件。这向我们表明 iron-page 已被选中。如果元素不存在，我们将延迟加载该元素。这背后的魔力在于自定义 LazyLoad JavaScript，如下所示。

<script>
        /**
        * Defines all the routes of the imports in here
        *
        * This is how it goes: The Key name is the tag name of the element.
        * The value is the relative URL from the elements folder.
        *
        * You then get the element's tag name and look for it.
        *
        * DO NOT PUT TRAILING SLASH BEFORE THE URL! Thanks :)
        **/
        var PGArena = PGArena || {};
        PGArena.LazyLoad =
        {
            "pgarena-home-app": "routes/home/pgarena-home-app.html",
            "pgarena-tournament-app": "routes/tournament/pgarena-tournament-app.html",
            "pgarena-account-app": "routes/account/pgarena-account-app.html",
            "pgarena-clash-app": "routes/clash/pgarena-clash-app.html",
            "pgarena-teams-app": "routes/teams/pgarena-teams-app.html",

            "pgarena-tournament-index-view": "views/tournament/pgarena-tournament-index-view/pgarena-tournament-index-view.html",
            "pgarena-tournament-list-view": "views/tournament/pgarena-tournament-list-view/pgarena-tournament-list-view.html",

            "pgarena-account-index-view": "views/account/pgarena-account-index-view/pgarena-account-index-view.html",
            "pgarena-account-login-view": "views/account/pgarena-account-login-view/pgarena-account-login-view.html",
            "pgarena-account-register-view": "views/account/pgarena-account-register-view/pgarena-account-register-view.html",
            "pgarena-account-confirm-email-view": "views/account/pgarena-account-confirm-email-view/pgarena-account-confirm-email-view.html",
            "pgarena-account-oauth-view": "views/account/pgarena-account-oauth-view/pgarena-account-oauth-view.html",

            "pgarena-clash-index-view": "views/clash/pgarena-clash-index-view/pgarena-clash-index-view.html",
            "pgarena-clash-brawl-view": "views/clash/pgarena-clash-brawl-view/pgarena-clash-brawl-view.html",

            "pgarena-teams-index-view": "views/team/pgarena-teams-index-view/pgarena-teams-index-view.html",
            "pgarena-teams-create-view": "views/team/pgarena-teams-create-view/pgarena-teams-create-view.html"

        };
        /**
        * This variable keeps track of all the vulcanized elements.
        *
        **/
        PGArena.Vulcanized = {

        }
        /**
        * Global Placeholder for checking which is the selected item of the iron-selectors that
         are ready for lazy loading.
        **/
        PGArena.IronSelected = {

        }

        /**
        * LazyLoad
        *
        * Lazy Loads the elements as needed. This function is triggered by iron-select
        * event. If the element is already registered, then it is not loaded again.
        *
        * Polymer => Dependency Injection of the Polymer object. (Polymer itself)
        * element => The element (DOM-wise: a.k.a tags with everything)
        * elementName => The element's name.
        * selectorTrigger => The element who triggered the select.
        **/
        function LazyLoad(Polymer, element, elementName, selectorTrigger) {
            if (Polymer.isInstance(element)) {
                // console.log(elementName + " is already registered ;)");
                return;
            } else {
                //console.log(elementName+" isn't registered. On its way for Lazy Loading!");
            }
            //console.log("Lazy Load Started");
            var hasProp = PGArena.LazyLoad.hasOwnProperty(elementName);
            if (!hasProp) {
                console.log("Property " + elementName + " not found for Lazy Loading");
                return;
            }

            var href = PGArena.LazyLoad[elementName];
            LoadImportAsync(href, elementName, selectorTrigger); 
        }

        function Spinner(elementName, active) {
            var paperId = 'js-' + elementName;
            var queryName = active ? elementName : paperId;
            var createElem = active ? 'paper-spinner-lite' : elementName;
            var elem = document.querySelector(queryName);
            var spinner = document.createElement(createElem);
                spinner.setAttribute('active', '');
            if (elem === null || elem === undefined)
                return;
            console.log("Element Name is");
            console.log(queryName);
            console.log("Element is");
            console.log(elem);

            console.log("Spinner is:");
            console.log(spinner);
            if (active) {
                spinner.setAttribute('id', 'js-' + elementName);

                console.log("replacing time");
                elem.parentNode.replaceChild(document.createTextNode("Caca"), elem);
                //elem.parentNode.replaceChild(spinner, elem);
            }
            else {
                console.log("Replaced");
                //elem.parentNode.replaceChild(elem, spinner);
            }

        }

        function ForcedLoad() {

        }
        /**
        * Loads the required import and appends it to the document. It really doesn't
        * matter where it is appended.
        *
        **/
        function LoadImportAsync(href, elementName) {

            var link = document.createElement('link');
            link.rel = 'import';
            link.href = getBaseUrl() + "/NodeJS/Polymer/app/elements/" + href;
            link.setAttribute('async', ''); // make it async!
            link.onload = function () { Spinner(elementName, false); }
            link.onerror = function (e) { console.log("There was an error loading " + elementName + ". Please Check the URL") };
            document.head.appendChild(link);
        }

        function getBaseUrl() {
            var pathArray = location.href.split('/');
            var protocol = pathArray[0];
            var host = pathArray[2];
            return protocol + '//' + host;
        }

        /**
        * On non-blink browsers (a.k.a Firefox , Edge, Internet Explorer)
        * The event.srcElement is undefined. We need to search for it ourselves.
        *
        * The way we do that is that we get the current targetted element which is the iron form.
        * Retrieve its selection mechanism and the supposed element's index.
        *
        * We proceed by query Selecting the element in the DOM all the way until we nab it.
        * Then we are faced with the next challenge. We don't know if the element is using an
        * index-based approach (0, 1, 2...) or an attribute approach(title="home", title="tournament",etc.)
        *
        * So we proceed to fetch its selection mechanism by grabbing the attrForSelected. If null, it means that
        * it is using the index-based approach. We continue and get the children position at the element.
        *
        * Note that selectedAttr variable will return me either the index or the selected attribute's value.
        * So it's going to be 0, 1, 2 if using the index based approach.
        *
        **/

        function getSelectedElement(event) {
            if (event.srcElement !== undefined)
                return event.srcElement.selectedItem;

            var element = event.target;

            //Get the current selected attribute:
            var selectedAttr = element.selected;
            //Gets the attribute that is being used for selection:
            var attrForSelected = element.attrForSelected;

            //This means that it is not using index based
            if (attrForSelected !== null) {
                return element.querySelector('[' + attrForSelected + '="' + selectedAttr + '"]');
            }

            //Continues using index based:
            var childelem = element.children[parseInt(selectedAttr)];
            return childelem;


        }



    </script>

我们要做的第一件事是定义与我拥有的文档相关的 URL。我通过定义一个 json 来实现这一点，该 json 的名称是 iron-pages 的 title 属性，值是该文档的相对 URL(pgarena-app ).

我的意思是，如果我想加载 pgarena-tournament-app 和我的 pgarena-app(我的应用程序的主要入口点)是在 www/polymer/pgarena-app.html 中，我的 pgarena-tournament-app 在 www/polymer/routes/tournament/pgarena-tournament-app.html 中，因为这是相对的，我的 JSON 将是:

var PGArena = PGArena || {}; PGArena.LazyLoad = { “锦标赛”:“路线/锦标赛/pgarena-tournament-app.html”， };

注意 PGArena.LazyLoad 可以是任何东西，这是我用 PGArena 命名空间定义的全局变量。

然后，我们看到调用了LazyLoad的代码:

function LazyLoad(Polymer, element, elementName, selectorTrigger) {
        if (Polymer.isInstance(element)) {
            // console.log(elementName + " is already registered ;)");
            return;
        } else {
            //console.log(elementName+" isn't registered. On its way for Lazy Loading!");
        }
        //console.log("Lazy Load Started");
        var hasProp = PGArena.LazyLoad.hasOwnProperty(elementName);
        if (!hasProp) {
            console.log("Property " + elementName + " not found for Lazy Loading");
            return;
        }

        var href = PGArena.LazyLoad[elementName];
        LoadImportAsync(href, elementName, selectorTrigger); 
    }

我在这里所做的是检查我要延迟加载的元素是否已在我定义的 JSON (PGarena.LazyLoad) 中被引用。如果它不在那里，那么我所做的就是记录该消息。如果它在那里，但尚未加载，那么我通过创建 HTML 导入并将其附加到头部来异步加载它:

 /**
        * Loads the required import and appends it to the document. It really doesn't
        * matter where it is appended.
        *
        **/
        function LoadImportAsync(href, elementName) {

            var link = document.createElement('link');
            link.rel = 'import';
            link.href = getBaseUrl() + "/NodeJS/Polymer/app/elements/" + href;
            link.setAttribute('async', ''); // make it async!
            link.onload = function () { Spinner(elementName, false); }
            link.onerror = function (e) { console.log("There was an error loading " + elementName + ". Please Check the URL") };
            document.head.appendChild(link);
        }

请注意(我不知道他们是否解决了这个问题)。有一个用于 Firefox、Edge 和 Safari(我相信)的 HTML 导入的 polyfill。 polyfill 使用 XHR (AJAX) 加载导入!!!我提到这个是因为一开始我试图拦截 HTML 导入，但在 Google Chrome 中它不起作用。

如果您还需要什么，请告诉我。如您所见，我尝试使用微调器，但没有成功。希望这对您有所帮助!