46 lines
1.2 KiB
Markdown
46 lines
1.2 KiB
Markdown
---
|
|
title: Use Route-Based Code Splitting
|
|
impact: CRITICAL
|
|
impactDescription: 30-70% initial bundle reduction
|
|
tags: 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):**
|
|
|
|
```javascript
|
|
// 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):**
|
|
|
|
```javascript
|
|
// 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](https://github.com/embroider-build/embroider)
|