初始聚合物加载时间本身就很慢
Posted
技术标签:
【中文标题】初始聚合物加载时间本身就很慢【英文标题】：Is inital Polymer load time inherently slow 【发布时间】：2018-04-14 09:07:06 【问题描述】：我使用 cli 工具创建了一个最小的 polymer-2-application。不做任何改动，只运行polymer serve，在Fast3G上第一次访问的初始加载时间是4s。在聚合物构建后它也保持 4 秒。
最重要的是任何 html 导入的加载时间，用于外壳、聚合物元素、firebase ......
我是否只需要接受 4s+ 的加载时间并在 index.html 中使用加载器、服务器端渲染和 amp 或其他一些解决方法，还是我遗漏了什么？
我知道我可以通过 service-worker 加快第二次访问的负载，但第一次访问者总是需要耐心？
这里是代码（与 polymer-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-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>
【问题讨论】：
【参考方案1】：默认情况下，Polymer 将其依赖项任意加载为单独的文件，这会导致几秒钟的加载时间 - 请注意开发工具的网络选项卡中的“瀑布”。例如，我们的一个工具在启动时发出 100 多个请求以加载元素等依赖项。
不使用服务工作者、服务器端渲染、客户端缓存等将导致后续页面加载的加载时间相当。
除非您从构建目录加载索引文件，否则捆绑您的应用不会产生影响。依赖项（例如来自 bower_comonents）将被烘焙到您构建的 src 子文件夹中的应用程序元素中，这导致使用丑陋代码的请求更少 - 这意味着您通过网络发送的字节更少。上面提到的 Out 工具通过捆绑减轻了大约 50% 的重量，负载时只发出 15 个请求。
示例图片https://imgur.com/a/g9UPM
独立于捆绑，您至少应该通过配置服务器来处理缓存，或者使用服务工作者。运行 NodeJS 时，您可能会查看 https://github.com/Polymer/prpl-server-node。
【讨论】：
检查了 imgur - 不错的网站，第二次加载时的加载性能很好，与我的网站第一次加载超过 3G 时的问题相同。以上是关于初始聚合物加载时间本身就很慢的主要内容，如果未能解决你的问题，请参考以下文章