kellyselden / ember-cli-tree-shaker

Experiment with tree-shaking in Ember CLI
MIT License
76 stars 7 forks source link

ember-cli-tree-shaker

Greenkeeper badge npm version Build Status

This is a testbed for the new tree-shaking and code splitting work from Kelly Selden and Alex Navasardyan. We will test things in here, and also port things from Ember CLI master so you can try them out early. This API is a work in progress, expect breaking changes (using SemVer). Feel free to suggest a better API. This project will eventually be deprecated when all the work makes it into a stable Ember CLI release.

So far, we have very basic tree-shaking. We use all of your app code as the entry point, and we only tree-shake the addon tree. This means that no app code is eliminated because it is all treated as "in use", and some addon may be inadvertently removed if it is not directly depended on from app code (vendor shims, container lookup, etc.). It is for this reason, we have an escape hatch defined below to manually include additional entry points.

Building the dependency graph takes time and isn't necessarily efficient. This will slow down your builds.

This doesn't work with Ember Engines yet. They have custom build code this project is not aware of.

This will probably break your tests, as the test code tree is not treated as an entry point.

Highlights:

Statistics Sample

Installation

ember install ember-cli-tree-shaker

Usage

// ember-cli-build.js

let app = new EmberApp(defaults, {
  treeShaking: {
    enabled: true,

    // optional
    include: [
      // This is where you can add additional entry points.

      // This is an example of dynamic lookup. There is no import statement, so it needs a hint to prevent removal.
      // https://github.com/poteto/ember-metrics/blob/c0fecc9e85190009d4d08d5be7db88df3e9803ea/addon/services/metrics.js#L177
      'ember-metrics/metrics-adapters/google-analytics.js',

      // This is an example of a vendor shim reaching back into the addon tree. This needs a hint to prevent removal.
      // https://github.com/simplabs/ember-test-selectors/blob/62070d20a2a50918f7cac373a3b23f8e9a94bf31/vendor/ember-test-selectors/patch-component.js#L10
      'ember-test-selectors/utils/bind-data-test-attributes.js'
    ]
  }
});

Measuring Results

After enabling treeShaking, an ember build will generate additional information in the console, including the number of modules traversed and the number of dead modules found:

ember build
...
dead 115
traversed 2935

Also, you can compare the size of vendor.js before and after enabling treeShaking:

# Before enabling

ember build --environment production

Built project successfully. Stored in "dist/".
File sizes:
  ...
 - dist/assets/vendor.js:  3.35 MB (941.55 KB gzipped)
# After enabling

ember build --environment production

Built project successfully. Stored in "dist/".
File sizes:
  ...
 - dist/assets/vendor.js: 3.29 MB (930.26 KB gzipped)

Contributing

Installation

Linting

Running tests

Running the dummy application

For more information on using ember-cli, visit https://ember-cli.com/.

License

This project is licensed under the MIT License.