如何在开发链接包时加快开发构建? (灰烬/西兰花)

时间:2017-09-12 05:13:33

标签: ember.js ember-cli broccolijs

我的西兰花构建需要花费很多时间。每次更改一行js时,构建约30秒(我的意思是使用dev服务器运行的增量重构,而不是完整的构建)。

这是我的情况。我有一个项目A,它是我npm link项目B的余烬插件。当我开发项目A时,我在项目B上运行ember server

每个单独的时间我对项目A中的一行javascript进行更改并重建,我看到项目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

我担心的是,因为我正在开发一个链接包,我的西兰花配置是这样的,整个node_modules被重新组合到那些供应商文件中。

有没有办法让我配置ember / broccoli来使用单独的文件来编译A并将其与vendor.js的其余部分隔离开来?例如B/dist/assets/A.min.cssB/dist/assets/A.min.js

...或者我是否错误地猜测问题的原因?

非常感谢您的帮助!

修改:此处提供了一些额外的信息

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)   

这里是index.js(项目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;
  }
});

0 个答案:

没有答案