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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.