我正在开发一个加载时间太长 >15 秒的 AngularJs 项目。 Js 和 Css 文件太多了如何优化？当页面在第一次加载时立即加载所有内容。我想让 Js 和 Css 按需加载。
从哪里开始以便我进行优化？请提出一些好的指导方针和工作流程。
【问题讨论】：
标签： javascript html css angularjs angularjs-directive
需要考虑的几点：
确保您的 CSS、JavaScript 和 HTML 文件使用 gzip 编码提供。这将大大减少页面加载时需要传输的数据量。
确保您的 JS 和 CSS 被缩小，这样可以消除空格并减小文件的大小。
尝试删除对大而笨重的库的依赖。 JQuery 非常庞大，通常可以使用更轻量级的库来代替。
看看 Google 的用于 Apache 和 NGINX 的 PageSpeed 模块。这可以执行一些神奇的任务，例如将您的 javascript 和 css 编译成单个文件。 https://developers.google.com/speed/pagespeed/module/
如果您使用兼容的网络服务器，请考虑启用 HTTP2（或旧服务器上的 SPDY）。
内容交付网络
有些人提倡使用公共内容交付网络（CDN，例如 maxcdn）来提供您的 JavaScript 文件。这有几个潜在的优势：
对于流行的库，文件很可能已经缓存在访问您网站的用户的浏览器中。
CDN 通常分布在全球，这应该使它们在全球范围内快速响应。
但是，我个人不同意，我确保我所有的第 3 方 JavaScript 库都在本地提供。原因如下：
如果 CDN 离线或出现问题，您的网站将会损坏（尽管可以使用 fallback loading 进行一些修补）
如果 CDN 过载或饱和，您的网站也会变慢
它在页面加载时添加了至少一个额外的 DNS 查找，这是另一个故障点
如果 CDN 遭到入侵，有人可能会在您的网站上放置一些恶意 javascript（这可以通过使用 "integrity" checksum 来避免）
Google Pagespeed 无法内联、合并和优化 CDN 提供的文件
CDN 提供的文件无法与您网站的其他部分进行管道传输
【讨论】：