9

My Broccoli builds take up a LOT of time. ~30 seconds to build every time I change a line of js (I mean the incremental re-builds with dev server running, NOT a complete build).

Here's my situation. I have project A which is an ember addon to project B which I npm link in. As I'm developing project A, I am running ember server on project B.

EVERY SINGLE TIME that I make a change to a line of javascript in project A and rebuild, I see that the following files change in project B: 

B/dist/assets/vendor.css
B/dist/assets/vendor.js
B/dist/assets/vendor.map
B/dist/assets/B.css
B/dist/assets/B.css.map

My concern is that, because I'm developing a linked package, my broccoli configuration is such that the entire node_modules is recombined into those vendor files.

Is there a way for me to configure ember/broccoli to use a separate file to compile A into and segregate it from the rest of vendor.js? B/dist/assets/A.min.css and B/dist/assets/A.min.js for example?

...or I'm a guessing at the cause of the problem incorrectly?

Thank you so much for your help in advance!

Edit: Here's some extra info as requested

Slowest Nodes (totalTime => 5% )              | Total (avg)         
----------------------------------------------+---------------------
Concat (11)                                   | 39239ms (3567 ms)   
RecastFilter (280)                            | 33127ms (118 ms)    
Babel (233)                                   | 14099ms (60 ms)     
EslintValidationFilter (5)                    | 12632ms (2526 ms)   
LessCompiler (46)                             | 7191ms (156 ms)  

Slowest Nodes (totalTime => 5% )              | Total (avg)         
----------------------------------------------+---------------------
SourceMapConcat: Concat: Vendor /asset... (1) | 36270ms             
LessCompiler (46)                             | 4029ms (87 ms)

Here's the index.js (Of project A):

const EngineAddon = require('ember-engines/lib/engine-addon');
const TreeMerger = require('broccoli-merge-trees');
const LessCompiler = require('broccoli-less-single');
const Funnel = require('broccoli-funnel');
const path = require('path');

module.exports = EngineAddon.extend({
  name: 'ember-engine-admin-ui',
  lazyLoading: false,

  treeForVendor(tree) {
    let addonTree = this.treeGenerator(path.resolve(this.root, this.options.trees.addon));
    let compiledLessTree = new LessCompiler(addonTree, 'styles/addon.less', `styles/${this.name}.css`);
    let sidebarCSSTree = new Funnel(path.dirname(require.resolve('sidebar-v2/css/leaflet-sidebar.css')), {
      files: ['leaflet-sidebar.css'],
      destDir: 'styles'
    });

    let sidebarJSTree = new Funnel(path.dirname(require.resolve('sidebar-v2/js/leaflet-sidebar.js')), {
      files: ['leaflet-sidebar.js'],
      destDir: 'js'
    });
    return new TreeMerger([tree, compiledLessTree, sidebarCSSTree, sidebarJSTree]);
  },

  included() {
    this._super.included.apply(this, arguments);
    this.import(`vendor/styles/${this.name}.css`);
    this.import('vendor/js/leaflet-sidebar.js');
    this.import('vendor/styles/leaflet-sidebar.css');
  },

  isDevelopingAddon() {
    return true;
  }
});
pixelpax
  • 1,435
  • 13
  • 22
  • Whats your OS? Also this doesn't make sense. It is expected for your `dist` folder to be replaced after every build. I don't see the problem. What are the slowest trees? – Lux Sep 21 '17 at 20:07
  • 1
    Running on MacOS. The entire dist folder isn't replaced nor should it be (right?) When I track the files being modified (using fswatch) I do NOT find that `B/dist/assets/B.js` is being replaced when I make changes in A, nor are static assets, just the vendor files. There should be a way of composing the changes that are made in A separately or, better yet, just serving transpiled (non-bundled) source files from the filesystem raw so that I don't have to wait so long every single time I change one character. It doesn't take this long in any other build system I've used. – pixelpax Sep 22 '17 at 02:59
  • Your right, that's too long! However that's not the problem. Broccoli should cache intermediate results, so it should just rebuild A, wave then concat, which should be fast. Your problem is somewhere else, so please show more informations. What are the slowest trees? (printed in the console), what add-ons are you using (some may burst the cache)? What is As index. Js doing? What you describe is OK, but should take less then 1s! – Lux Sep 22 '17 at 09:06
  • @Lux Added the requested information to the post! Could it have to do with lazy loading? Would B's `ember-cli-build.js` be relevant, here? – pixelpax Sep 22 '17 at 14:58
  • I don't whether its still relevant/needed, but here at my 2c's anyway: There are various things you can change in ember-cli-build.js and config/environment.js. There is a nice article on the following link describing changes that will improve build speed. It almost doubled the buidspeed on my projects. https://discuss.emberjs.com/t/tips-for-improving-build-time-of-large-apps/15008 – Bracke Jul 01 '18 at 14:34
  • I’m voting to close this question because it's very old, and not relevant anymore -- the general topic is relevant, but given the setup in the question, it's really for legacy apps. In today's ember, folks shouldn't be doing anything with broccoli - as of early 2023, a lot of apps are primarily using webpack, and with v2 addons, builds don't happen during app-build-time anymore – NullVoxPopuli Jan 28 '23 at 20:45

0 Answers0