AngularJS 和 Rails 性能问题（更好地集成或分离） - js 和 css 资产管道答案

【问题标题】：AngularJS and Rails performace issues (better integrated or separated) - js and css asset pipelineAngularJS 和 Rails 性能问题（更好地集成或分离） - js 和 css 资产管道
【发布时间】：2014-08-01 23:59:24
【问题描述】：

我正在开发一个 AngularJS 前端和 Rails API 后端 Web 应用程序。是时候上线了，所以我部署在一个 Amazon 中型 EC2 实例中。当我看到性能（至少对于主页）没有预期的那么好时，我感到很惊讶。因此，我开始研究如何提高性能。

我做了一些性能测试，并使用 Chrome 分析工具检查了结果。我看到我发送到服务器以获取 js 或 css 资源的请求有很大的延迟。我写了另一个帖子，有人证实了这一点：

AWS EC2 micro and medium instances with same performance?

我有很多 js 文件，因为我的应用程序控制器分隔在多个文件中。或多或少对于css。

我读过您可以将 js 和 css 文件放入 Rails 应用程序的 assets 文件夹中，然后您可以进行管道传输（压缩为一体）。这应该会提高性能。我的问题是我的 AngularJS 和 Rails 应用程序完全分开（没有集成在一个中）。所以，我可以将每一个部署在不同的位置。

我认为以这种方式开发我的应用程序非常酷，但现在，我对此非常担心。

有什么解决办法吗？我可以将我的控制器和 css 移动到 Rails 中的资产吗？或者在AngularJS中有没有类似的管道或压缩文件的工具？

我应该将 AngularJS 前端和 Rails 后端集成到一个应用程序中吗？

【问题讨论】：

标签： javascript ruby-on-rails angularjs amazon-ec2 asset-pipeline

【解决方案1】：

有很多工具可以实现与 Rails 资产管道相同的构建管道仅使用 js 环境。

一种解决方案是将 grunt 作为构建工具，将 bower 作为包管理器。 Grunt 有大量的构建任务，比如预处理 sass 和 coffescript 以及压缩和压缩 css 和 js 文件。

设置此类环境的最简单方法是使用Yeoman。它具有适用于不同框架的生成器，包括可用的 Angular。

您可以只生成一个新的 Angular 项目并查看它会创建什么，而不是复制 Gruntfile 并将您的项目结构调整为生成的项目。

【讨论】：