javascript - AngularJS 和 Rails 性能问题(更好地集成或分离) - js 和 css asset pipeline

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

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

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

AWS EC2 micro and medium instances with same performance?

我有很多 js 文件,因为我的应用程序 Controller 分为多个文件。或多或少还有CSS。

我读到您可以将 js 和 css 文件放入 Rails 应用程序的 asset 文件夹中,并且可以进行管道传输(将所有文件压缩为一个)。这应该会提高性能。我的问题是我的 AngularJS 和 Rails 应用程序完全分开(没有集成在一起)。因此,我可以将每个部署在不同的位置。

我以为我以这种方式开发我的应用程序真是太酷了,但现在,我对此有很大的担忧。

有什么解决办法吗?我可以将 Controller 和 CSS 移动到 Rails 中的资源吗?或者 AngularJS 中是否有类似的管道或压缩文件工具?

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

最佳答案

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

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

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

您可以生成一个新的 Angular 项目并查看它将创建什么,而不是复制 Gruntfile 并使您的项目结构适应生成的项目。

关于javascript - AngularJS 和 Rails 性能问题(更好地集成或分离) - js 和 css asset pipeline,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24171207/

相关文章:

javascript - 为什么这是有效的语法?

ruby-on-rails - 如何将现有模型(包括插入的行)从可空列迁移到不可空列

ruby-on-rails - ROR 按时间上彼此的接近程度进行分组

javascript - 在 ng-view 页面中创建 Controller

javascript - Angularjs 操作每个 ng-repeat 元素

javascript - jquery 中带有 `filter` 的 toLowerCase()

javascript - 元素事件监听器回调不适用于自定义事件

javascript - 温泉 - 对话框中的按钮不起作用

php - 更新后自动缩小 Javascript/CSS 文件?

html - 我的 Rails 应用程序的不同应用程序布局