My Broccoli builds are time consuming. ~ 30 seconds to build every time I change the js line (I mean incremental re-builds with the dev server running, not the full build).
Here is my situation. I have project A, which is ember addon for project B, which I am npm link in. When I develop project A, I start ember server in project B.
EVERY TIME that I make changes to the javascript string 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
I am concerned that since I am developing a bundled package, my broccoli configuration is such that all node_modules recombined into these vendor files.
Is there a way to configure ember / broccoli to use a separate file to compile A and separate it from the rest of vendor.js ? B/dist/assets/A.min.css and B/dist/assets/A.min.js for example?
... or am I misunderstanding the cause of the problem?
Thank you so much for your help in advance!
Edit: here more information on request
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 index.js (from 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; } });