AngularJS 初始加载时间优化

Question

我的应用程序只有 15 页，并且不包含大量客户端代码。该网站由阿姆斯特丹的 modulus 托管，我从德国调用它。它的加载时间非常长，而且我是唯一一个调用该网站的人。服务器统计:传输 154 个请求 9.14mb 平均响应 4.31ms

大部分加载时间似乎是vendor.css和vendor.js。以及应用程序的css和js。

我已经做了什么:

• 首先加载CSS
• 尝试稍后加载不需要的js，例如socket.io、google Analytics，但它是一个Angular应用程序，所以我需要在头部添加一些JS
• 丑化并缩小我的 JS 和 CSS
• 连接CSS、JS以减少请求
• 对使用两次的小图像使用 Sprite +
• 负载差异。基于屏幕尺寸的图像尺寸
• 对 HTML 使用 Angular 模板缓存(这会增加一点初始加载时间)
• 可能还有一些我忘记提及的事情

问题 1

为什么瀑布中有一个间隙，当然这些是外部脚本，但当时它已经可以加载图像了。

问题 2

从CDN加载外部JS会减少很多加载时间吗？我想到了某事像这样:https://www.npmjs.com/package/gulp-cdnizer但我喜欢它有一个类似的程序。在开发和生产中。而且我的 gulp 流程非常复杂，我真的尽力避免在那里进行太多重组。

问题 3

像 gzip 这样的东西如何与 Angular 模板缓存结合起来？

问题 4

我还能做什么来减少初始加载时间，应用程序中的加载时间很好。

Answer 1

1. 因为在 dom 加载之前您的网站不会加载，因为这是一个单页面应用程序，没有 Angular ，页面不知道要加载什么图像...
2. 是的!是的!是的!我的 dom 负载约为 11 秒...我的 js 聚合文件为 850K。使用 CDN，我的 dom 加载时间为 2 秒，文件大小为 250K(因为良好的 gzip)
3. 是的，是的，是的!会有很大帮助!
4. 使用 javascript 聚合将所有 js 合并并最小化为单个文件(或 2 个文件)。如果您有很多文件，请分成 2 个文件，必需文件和额外文件。您需要加载什么以及稍后可以加载什么...

祝你好运:)