marco/.agents/skills/ember-best-practices/rules/route-lazy-routes.md

title, impact, impactDescription, tags

title	impact	impactDescription	tags
Use Route-Based Code Splitting	CRITICAL	30-70% initial bundle reduction	routes, lazy-loading, embroider, bundle-size

Use Route-Based Code Splitting

With Embroider's route-based code splitting, routes and their components are automatically split into separate chunks, loaded only when needed.

Incorrect (everything in main bundle):

// ember-cli-build.js
const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function (defaults) {
  const app = new EmberApp(defaults, {
    // No optimization
  });

  return app.toTree();
};

Correct (Embroider with Vite and route splitting):

// ember-cli-build.js
const { Vite } = require('@embroider/vite');

module.exports = require('@embroider/compat').compatBuild(app, Vite, {
  staticAddonTestSupportTrees: true,
  staticAddonTrees: true,
  staticHelpers: true,
  staticModifiers: true,
  staticComponents: true,
  splitAtRoutes: ['admin', 'reports', 'settings'], // Routes to split
});

Embroider with splitAtRoutes creates separate bundles for specified routes, reducing initial load time by 30-70%.

Reference: Embroider Documentation