优化Angular Js电子商务项目

Question

我正在处理一个AngularJs项目，它的加载时间太长> 15秒。它有太多的Js和Css文件如何优化？当页面第一次加载时加载所有内容。我想按需加载Js和Css。

从哪里开始，以便我可以优化？请提出一些好的指导方针和工作流程。

Answer 1

几点考虑：

1. 确保您的CSS，JavaScript和HTML文件被送达gzip编码。这将显着减少页面加载时需要传输的数据量。

2. 确保您的JS和CSS被缩小，这消除了空白并减小了文件的大小。

3. 尝试删除大型庞大库的依赖关系。 JQuery非常庞大，而且通常可以使用更轻量级的库来代替。

4. 看看谷歌的PageSpeed模块的Apache和NGINX。这可以执行一些神奇的任务，比如将你的javascript和css编译成单个文件。 https://developers.google.com/speed/pagespeed/module/

5. 如果您使用兼容的网络服务器，请考虑启用HTTP2（或旧服务器上的SPDY）。

内容分发网络

有人提倡使用公共内容分发网络（CDN，比如maxcdn）来服务你的JavaScript文件。这有几个潜在的优势：

• 与流行的图书馆，很可能文件已被缓存在访问您的网站的人的浏览器。

• CDN通常是全球分布的，这应该使它们在全球范围内快速响应。

但是，我个人不同意，并且确保我所有的第三方JavaScript库都在本地提供服务。这里的原因：

• 如果CDN脱机或有问题，你的网站就会被打破。如果一个CDN过载（虽然这可能有点用fallback loading修补）

• 或饱和，你的网站会也慢

• 其添加在页面加载，这是失败的

• 的另一点。如果CDN得到妥协至少一个额外的DNS查询，有人可能会放置一些malicio我们的JavaScript在您的网站

• CDN提供的文件不能被内联，合并，并通过谷歌的PageSpeed优化（这可以通过使用"integrity" checksum避免）

• CDN提供的文件无法与您的网站的其余部分流水线