marco/.agents/skills/ember-best-practices/rules/bundle-direct-imports.md

title, impact, impactDescription, tags

title	impact	impactDescription	tags
Avoid Importing Entire Addon Namespaces	CRITICAL	200-500ms import cost reduction	bundle, imports, tree-shaking, performance

Avoid Importing Entire Addon Namespaces

Import specific utilities and components directly rather than entire addon namespaces to enable better tree-shaking and reduce bundle size.

Incorrect (imports entire namespace):

import { tracked } from '@glimmer/tracking';
import Component from '@glimmer/component';
import { action } from '@ember/object';
// OK - these are already optimized

// But avoid this pattern with utility libraries:
import * as lodash from 'lodash';
import * as moment from 'moment';

class My extends Component {
  someMethod() {
    return lodash.debounce(this.handler, 300);
  }
}

Correct (direct imports):

import { tracked } from '@glimmer/tracking';
import Component from '@glimmer/component';
import { action } from '@ember/object';
import debounce from 'lodash/debounce';
import dayjs from 'dayjs'; // moment alternative, smaller

class My extends Component {
  someMethod() {
    return debounce(this.handler, 300);
  }
}

Even better (use Ember utilities when available):

import { tracked } from '@glimmer/tracking';
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { debounce } from '@ember/runloop';

class My extends Component {
  someMethod() {
    return debounce(this, this.handler, 300);
  }
}

Direct imports and using built-in Ember utilities reduce bundle size by avoiding unused code.