Smaller bundles

broccoli-concat-analyser is a tool that visualizes JavaScript asset sizes in an Ember app's final build. We use it to better understand which files are ending up in EmberMap's production distribution.

Update: This video shows us installing and configuring broccoli-concat-analyser, but there's now a better way to get things wired up: Ember CLI Bundle Analyzer. Be sure to check it out! Once installed, the rest of the lessons of the video still apply.

npm install -g broccoli-concat-analyser
CONCAT_STATS=true ember b -environment=production
broccoli-concat-analyser ./concat-stats-for

After running this tool, we discovered that Lodash was being included in our production build and it accounted for about 70kb of the build's file size.

We only use Lodash in our Mirage factories and tests, so there's no need for it to be in our production build.

To fix this, we created an importable vendor shim for Lodash:

ember g vendor-shim lodash

And then we only import that shim in non-production environments.

// ember-cli-build.js

module.exports = function(defaults) {
  let app = new EmberApp(defaults, { ... });

  if (app.env !== 'production') {
    app.import('vendor/lodash.min.js');
    app.import('vendor/shims/lodash.js');
  }
});

This change prevents Lodash from ending up in our production build. After running the analyser again, we see our production build has dropped by more than 40kb of compressed JavaScript!