Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Ember CLI performance improvements and tips
// 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();
}
}
// config/environment.js
if (environment === 'development') {
ENV['ember-cli-mirage'] = {
enabled: false,
excludeFilesFromBuild: true // Don't include lodash and everything else mirage needs
};
}
@vasind

This comment has been minimized.

Copy link
Owner Author

@vasind vasind commented Mar 29, 2020

Please add your suggestions and post your results before and after adding this to your project files.

@nightire

This comment has been minimized.

Copy link

@nightire nightire commented Apr 2, 2020

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.

@rstudner

This comment has been minimized.

Copy link

@rstudner rstudner commented Apr 4, 2020

Maybe i'm missing something -- where did the nodeSass variable come from?

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

@nightire

This comment has been minimized.

Copy link

@nightire nightire commented Apr 4, 2020

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

Yes.

@vasind

This comment has been minimized.

Copy link
Owner Author

@vasind vasind commented Apr 6, 2020

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.

@vasind

This comment has been minimized.

Copy link
Owner Author

@vasind vasind commented Apr 6, 2020

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.

@oliverlj

This comment has been minimized.

Copy link

@oliverlj oliverlj commented Apr 6, 2020

I need sourcemaps for remote debugging in vscode

@NullVoxPopuli

This comment has been minimized.

Copy link

@NullVoxPopuli NullVoxPopuli commented Dec 31, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment