Ember CLI performance improvements and tips

ember-cli-build.js

// Credits to the following posts that helps me to reduce build times drastically

// https://discuss.emberjs.com/t/tips-for-improving-build-time-of-large-apps/15008/12
// https://www.gokatz.me/blog/how-we-cut-down-our-ember-build-time/


//ember-cli-build.js
let EmberApp = require('ember-cli/lib/broccoli/ember-app');

let env = EmberApp.env(),
  IS_PROD = env === 'production',
  IS_TEST = env === 'test' ;

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    hinting: IS_TEST, // Disable linting for all builds but test
    tests: IS_TEST, // Don't even generate test files unless a test build
    "ember-cli-babel": {
      includePolyfill: IS_PROD // Only include babel polyfill in prod
    },
    autoprefixer: {
      sourcemap: false // Was never helpful
    },
    sourcemaps: {
      enabled: IS_PROD // CMD ALT F in chrome is *almost* as fast as CMD P
    },
    fingerprint: {
      enabled: IS_PROD //Asset rewrite will takes more time and fingerprinting can be omitted in development
    },
    sassOptions: {
    // moving from compass compiler to node gave huge improvement
      implementation: nodeSass, //implementation here is node-sass,
      sourceMap : false //will debug with generated CSS than sourcemap :) 
    },

// Only import other polyfills in production
    if (IS_PROD) {
      app.import('vendor/ie-polyfill.js');
    }
   return app.toTree();
  }
}

environment.js

// config/environment.js
if (environment === 'development') {
    ENV['ember-cli-mirage'] = {
      enabled: false,
      excludeFilesFromBuild: true // Don't include lodash and everything else mirage needs
    };
}

Do I need a const nodeSass = require('node-sass'); at the top AND putting node-sass in my package.json?

Yes.

https://gist.github.com/vasind/22122632be15f3bc98a092ab012524e2#file-ember-cli-build-js-L19

Should mention it's only for legacy browsers like IE11 or so, modern browsers don't need this polyfill.

I just given it as an example of loading polyfill. Thanks for pointing out the confusion.

https://gist.github.com/vasind/22122632be15f3bc98a092ab012524e2#file-ember-cli-build-js-L25
https://gist.github.com/vasind/22122632be15f3bc98a092ab012524e2#file-ember-cli-build-js-L28
https://gist.github.com/vasind/22122632be15f3bc98a092ab012524e2#file-environment-js-L3

Aren't these by default @vasind?

I have seen in some project's where these options are explicitly set as true during development. Just to give an awareness of what are the options we can tweak.

I need sourcemaps for remote debugging in vscode

Commenting here because there has been some confusion / concern:

I would not use the IS_TEST or check environment === test. The official docs, and many expectations are around the presence of /tests, which runs in the development environment. If there are any build-time transforms or configuration around the test environment, than the default /tests would not be available.

for completeness, and some may already know this -- given the contents of the gist, I'd flat out disable hinting and if you're disabling tests for build performance, (Like if running 3 times with tests: true and 3 times with tests: false (with deleting tmp and dist between each) shows dramatic (> 10%) time difference) then I'd look in to instead going a multi-app approach (not engines, cause they eagerly build, iirc) -- this way the amount of code in either app is reduced significantly