https://github.com/duizendnegen/ember-cli-lazy-load

Support lazily loading your Ember app via splitting it up into Bundles
https://github.com/duizendnegen/ember-cli-lazy-load

Last synced: about 2 months ago
JSON representation

Support lazily loading your Ember app via splitting it up into Bundles

• Host: GitHub
• URL: https://github.com/duizendnegen/ember-cli-lazy-load
• Owner: duizendnegen
• License: mit
• Created: 2016-01-13T15:52:20.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2020-09-12T13:48:42.000Z (about 4 years ago)
• Last Synced: 2024-07-13T05:47:16.344Z (2 months ago)
• Language: JavaScript
• Size: 67.4 KB
• Stars: 42
• Watchers: 5
• Forks: 8
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-ember - ember-cli-lazy-load - Support lazily loading your Ember.js app via splitting it up into Bundles. (Packages / Code Splitting)

README

        
# Ember-cli-lazy-load

Ember Cli Lazy Load supports lazily loading your Ember application, by splitting the app up into bundles. It comes with [a dummy app](https://github.com/duizendnegen/ember-cli-lazy-load/tree/master/tests/dummy) that implements a basic lazy loading scenario.

Requirements: `ember-cli` >= 2.3.0

For `ember-cli` == 2.2.0, use release `0.2.2`.

Whenever [ember-engines](https://github.com/dgeb/ember-engines) land their version of lazy loading, this add-on will be deprecated.

## Installation

* `ember install ember-cli-lazy-load`

## Getting started

#### 1. Configure your bundles in `config/bundles.js`

```javascript

index: {

  //Minisearch file patterns for the content of the bundle

  files: [

    "**/templates/index.js",

    "**/controllers/index.js",

    "**/components/my-cat/**.js"

  ],

  //The name of the routes if you are using the lazy-route mixin, no minisearch expressions are allowed here.

  routes: ["index", "..."]

  //The dependencies for this bundle. They will loaded in the same batch as the actual bundle

  //The dependencies have to be loaded prior to the dependent bundles.

  dependencies: ["about"],

},

about: {

  files: [

    "**/templates/about.js",

    "**/controllers/about.js",

    "**/components/my-item/**.js"

  ],

  routes: ["about", "more routes for this bundle "]

}

```

#### 2. Modify `config/environment.js` to include the bundle files

```javascript

var bundles = require("./bundles");

module.exports = function(environment) {

  var ENV = {

    bundles: bundles(environment),

```

#### 3. Modify your `ember-cli-build.js` to use the custom bundle build flow.

```javascript

var EmberApp = require("ember-cli-lazy-load/ember-app");

var bundles = require("./config/bundles")();

module.exports = function(defaults) {

  var app = new EmberApp(defaults, {

    // Add options here

    bundles: bundles

  }

```

#### 4. Add Mixin to your routes

```javascript

import Ember from "ember";

import LazyRouteMixin from 'ember-cli-lazy-load/mixins/lazy-route';

export default Ember.Route.extend(LazyRouteMixin, {});

```

if you already override `beforeModel`, ensure that you execute and await the super call:

```javascript

import Ember from "ember";

import LazyRouteMixin from 'ember-cli-lazy-load/mixins/lazy-route';

export default Ember.Route.extend(LazyRouteMixin,{

  beforeModel: function(transition, queryParams){

      return this._super(transition,queryParams).then(()=>{

        // do the other beforeModel operations

      });

    }

});

```

## Running

* `ember server`

* Visit your app at http://localhost:4200.

## Running Tests

* `npm test` (Runs `ember try:testall` to test your addon against multiple Ember versions)

* `ember test`

* `ember test --server`