ember-cli - 如何调试缓慢的 Ember CLI/Broccoli 构建

Question

我的 Ember CLI 项目目前需要 8-9 秒来构建，我想了解原因。该项目并没有那么大(app/ 下约 180 个文件，包括 hbs 和 scss)。

这是我的 brocfile:https://gist.github.com/samselikoff/874c90758bb2ce0bb210

但是，即使我将整个 Brocfile 注释掉并仅导出 app变量，构建仍然需要 5-6 秒。

我不太确定如何调试。这是我最慢的树日志:

构建成功 - 8874ms。

Slowest Trees                  | Total          
-------------------------------+----------------
TreeMerger (appAndDependencies)| 1286ms         
TreeMerger (vendor)            | 1275ms         
CompassCompiler                | 1204ms         
StaticCompiler                 | 1185ms         
TreeMerger (stylesAndVendor)   | 1151ms         
TreeMerger (allTrees)          | 706ms          
StaticCompiler                 | 625ms    

Answer 1

更新:如果您使用 ember-cli版本 0.1.0 或更高版本，这个 hack 可能没有必要。 ember-cli现在symlinks files而不是复制。您可能仍会在 Windows 或慢速磁盘上获得性能改进。

西兰花(由 ember-cli 使用)将其临时状态存储在文件系统中，因此它非常依赖于文件 I/O。尽量减少 public/ 中的文件数量, vendor/和 bower_components/目录。这些文件夹中的所有文件都将被复制 每个重建周期至少一次 .文件夹中文件的大小和数量会极大地影响性能。

本质上，每次更改文件时，broccoli 都会在 <ember app>/tmp/ 内的多个目录之间复制文件。 .对于您的 bower_components/ dir，它似乎不止一次地复制每个文件。它需要这样做，因为您可能会使用 app.import('some.js')在您的 Brocfile.js , 你也可以 @import "some.scss"在 SASS/LESS 文件中。无法知道您实际需要哪些文件，因此它会复制所有文件。

如果您从 bower_components/ 中删除不需要的文件和 vendor/ ，您会注意到更好的构建时间。

一个真实世界的例子

如果您安装 highcharts.com#3.0.5 bower 依赖项，您还将在 bower_components/ 中获得 2829 个文件 (198MB) 的特殊礼物目录想象一下那里发生的不必要的文件系统读取和复制。

这是我清理的目录结构的片段:

$ find bower_components -type f | grep highcharts
bower_components/highcharts.com/js/highcharts-more.src.js
bower_components/highcharts.com/js/highcharts.src.js

请注意，只有 .js文件仍然存在，我删除了其他所有内容。那是 2827 个已删除的文件。 Highcharts 是一个极端的例子，但您的大多数依赖项的文件数量是您实际需要的 5 倍。

积极的 future
ember-cli团队正在努力提高底层西兰花生态系统的性能。工作 has already begun一些现实世界的应用程序(带有大树)正在看到性能改进，将重建时间从 4 秒减少到 600 毫秒。使用 symlinks instead of copying正在显着改善。

对于我们这些拥有大型应用程序、大量 Bower 部门和许多哭泣的团队成员，他们现在需要一个解决方案:

临时解决方案

一种保存您的 bower_components/ 的方法clean，是将依赖项检查到版本控制中。这允许您使用 git clean轻松修剪您的目录:

bower install —-save d3
git add -—force bower_components/d3/d3.js # force, because bower_components/ is gitignored
git commit -m "Added d3.js"

// Brocfile.js
app.import('bower_components/d3/d3.js');

每次做 bower install你可能会在你的目录中得到所有额外的东西。 git clean轻松删除非版本控制文件:

git clean -f -d -x bower_components/
ember serve

完成此操作后，一次重建(更改文件后的构建时间)从 20 秒降至 3.5 秒(我们有一个相当大的应用程序)。

如果您确实走这条路，请不要忘记 Ember 所需的凉亭部门:

bower_components/ember/ember.js
bower_components/ember/ember.prod.js
bower_components/ember-cli-shims/app-shims.js
bower_components/ember-cli-test-loader/test-loader.js
bower_components/ember-data/ember-data.js
bower_components/ember-data/ember-data.prod.js
bower_components/ember-load-initializers/ember-load-initializers.js
bower_components/ember-resolver/dist/modules/ember-resolver.js
bower_components/jquery/dist/jquery.js
bower_components/loader/loader.js
bower_components/handlebars/handlebars.js
bower_components/handlebars/handlebars.runtime.js

这是给你的 git 命令:

bower install
git add -f bower_components/ember/ember.js bower_components/ember/ember.prod.js  bower_components/ember-cli-shims/app-shims.js  bower_components/ember-cli-test-loader/test-loader.js  bower_components/ember-data/ember-data.js  bower_components/ember-data/ember-data.prod.js  bower_components/ember-load-initializers/ember-load-initializers.js  bower_components/ember-resolver/dist/modules/ember-resolver.js  bower_components/jquery/dist/jquery.js  bower_components/loader/loader.js  bower_components/handlebars/handlebars.js bower_components/handlebars/handlebars.runtime.js
git commit -m "Added ember-cli dependencies"
git clean -f -d -x bower_components/