JavaScript Size

Performance
1

By default, the app created via ember-cli builds two .js files: A “vendor” one and an app one. For my fresh-out-of-the-box Ember.js 2.7 app that’s basically just the Getting Started example, the vendor file from an ember build -prod is 678k in size (gzips to about 181). cdnjs.com’s copy of Ember 2.7 is 428k (gzips down to a nice 112). My bower.json looks like this:

{
  "name": "emtest",
  "dependencies": {
    "ember": "~2.7.0",
    "ember-cli-shims": "0.1.1",
    "ember-qunit-notifications": "0.1.0"
  }
}

Both of the things other than Ember itself look like things that wouldn’t be in a production build, and indeed if I remove them the size of the vendor file doesn’t change.

Where’s the extra 250k coming from?

Thanks,

– T.J.

2

Partial answer: jQuery.

Ember’s bower.json lists jQuery as a dependency. If I modify ember-cli-build.js to tell it to leave out ember.js (perhaps because I’ll load it from a CDN):

var app = new EmberApp(defaults, {
  vendorFiles: {
    'ember.js': false
  }
});

…I end up with a vendor-xxx.js file of about 250k, so that matches up. When I pretty-printed and paged through it, it was clear a fair bit of it was jQuery. So adding jquery.js to the exclude list:

var app = new EmberApp(defaults, {
  vendorFiles: {
    'jquery.js': false,
    'ember.js': false
  }
});

…leaves me with a vendor-xxx.js file of 159k. I have no idea what’s in it, but I still get it with the app’s bower.json only listing Ember (not ember-cli-shims or ember-qunit-notifications).

What’s that code for? It gzips to about 38k so we’re close to “meh, whatever” territory, probably, but I’m still keen to know.

– T.J.

3

What does your package.json file looks like? Is ember-data included?

1 Like
4

Looks like it, yeah, or at least it’s listed under devDependencies:

{
  "name": "emtest",
  "version": "0.0.0",
  "description": "Small description for emtest goes here",
  "private": true,
  "directories": {
    "doc": "doc",
    "test": "tests"
  },
  "scripts": {
    "build": "ember build",
    "start": "ember server",
    "test": "ember test"
  },
  "repository": "",
  "engines": {
    "node": ">= 0.10.0"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "broccoli-asset-rev": "^2.4.2",
    "ember-ajax": "^2.0.1",
    "ember-cli": "2.7.0",
    "ember-cli-app-version": "^1.0.0",
    "ember-cli-babel": "^5.1.6",
    "ember-cli-cdn": "2.1.0",
    "ember-cli-dependency-checker": "^1.2.0",
    "ember-cli-htmlbars": "^1.0.3",
    "ember-cli-htmlbars-inline-precompile": "^0.3.1",
    "ember-cli-inject-live-reload": "^1.4.0",
    "ember-cli-jshint": "^1.0.0",
    "ember-cli-qunit": "^2.0.0",
    "ember-cli-release": "^0.2.9",
    "ember-cli-sri": "^2.1.0",
    "ember-cli-test-loader": "^1.1.0",
    "ember-cli-uglify": "^1.2.0",
    "ember-data": "^2.7.0",
    "ember-export-application-global": "^1.0.5",
    "ember-load-initializers": "^0.5.1",
    "ember-resolver": "^2.0.3",
    "ember-welcome-page": "^1.0.1",
    "loader.js": "^4.0.1"
  }
}

(This is just using defaults when creating the app.)

Removing it makes vendor-xxx.js ~27k (8.5 gzipped).

– T.J.

5

This is a very interesting topic. I asked a question today and your info could be helpful to decide if I use an ember-engine or not. If I could remove all the dependencies which are already present in the “main” app this would be great :smiley:

6

All of these packages have content that ends up in vendor.js.

1 Like
7

Thanks! I tried removing them all, but it looks like several are required for the default app to work. Still, without ember-data it’s just 27k (8.5k gzipped) on top of Ember and jQuery (and if you need ember-data, well, it’s not that big), so…

Thanks all!

– T.J.

8

Something like https://github.com/hughsk/disc and http://hughsk.io/disc/ would be awesome to see for ember-cli projects.

2 Likes
9

I know the question was out of curiosity, not because size was prohibitive.

But for others ending up here: usually 1-2 images/fonts will be more than all JS, so better to optimize other resources. Also with gzip + http/2 + CDN asset size won’t be much of a worry.