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

Posted 2023-02-19

【中文标题】如何调试缓慢的 Ember CLI/Broccoli 构建

【英文标题】：How to debug slow Ember CLI/Broccoli builds

【发布时间】：2014-09-07 01:57:31

【问题描述】：

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

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

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

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

构建成功 - 8874 毫秒。

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

【问题讨论】：

您是否碰巧在运行 Windows？我有一个问题，构建需要 20 秒才能完成，而且我的项目很小。原来是我的病毒扫描程序干扰了构建。查看 Github 上的 this thread 了解更多信息。

@sonikarc 不，mac。 Ty 链接

【参考方案1】：

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

---

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

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

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

一个真实的例子

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

这是我清理后的目录结构的 sn-p：

$ 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 部门和许多哭泣的团队成员，现在需要解决方案的人：

临时解决方案

保持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/

【讨论】：

在您在 IRC 上向我指出这一点后，我创建了一个脚本，该脚本基本上可以实现相同的目标，而不会污染 git 存储库。它还具有自动保留从 Brocfile.js 导入的文件的一些魔力。你可以在这里看到它：gist.github.com/dschmidt/a68747348036fd6aa989（是的，我完全不擅长 bash 脚本：P）

我对@DominikSchmidt 的脚本gist.github.com/wrenoud/784dfcff244265f9593b 的看法我喜欢不污染回购。

等待找到你的其他帖子，所以我会尝试cmd > node C:/my/ember-cli/project/path/clean_ember-cli.js

【参考方案2】：

除了@tstirrat 的回答：

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

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

Answer taken from here