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

时间:2014-07-16 13:45:12

标签: ember-cli broccolijs

我的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    

2 个答案:

答案 0 :(得分:14)

更新:如果您使用的是ember-cli版本0.1.0或更高版本,则可能不需要此hack。 ember-cli现在symlinks files而不是复制。 可能仍可在Windows或慢速磁盘上获得性能提升。


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

基本上,每次更改文件时,西兰花都会在<ember app>/tmp/内的许多目录之间复制文件。对于bower_components/目录,它似乎是多次复制每个文件 。它需要执行此操作,因为您可能在app.import('some.js')中使用Brocfile.js,在SASS / LESS文件中也可能@import "some.scss"。无法知道您实际需要哪些文件,因此它会复制所有这些文件。

如果您从bower_components/vendor/删除不需要的文件,您会发现更长的构建时间。

一个真实世界的例子

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

这是我清理过的dir结构的片段:

$ 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倍。

未来积极的未来

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

对于我们这些拥有大型应用程序的人,许多需要解决方案的bower deps和许多哭泣的团队成员现在

临时解决方案

保持bower_components/清洁的一种方法是检查版本控制中的依赖项。这允许您使用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/

答案 1 :(得分:0)

除了@ tstirrat的回答:

仅以管理员身份运行才允许您使用符号链接文件 (默认SeCreateSymbolicLinkPrivilege标志)尝试以管理员身份运行cmd(或PowerShell),看看它是否有帮助。

您可以使用Local Policies配置为特定用户允许它。

Answer taken from here