Angular 2 ленивых метода загрузки

Я уже написал большое приложение с Angular 1 и requireJS с AMD для ленивой загрузки и структурирования. Приложение не использует маршруты, но части приложения, такие как HTML, css и Javascript (angular модули), загружаются с лени.

Теперь я хочу перейти на Angular 2, и я ищу лучшую ленивую технику загрузки содержимого HTML, css и JS (angular), которая не зависит от маршрутов и которая не зависит от тысяч различных фреймворков javascript.

Таким образом, ленивые компоненты маршрута загрузки выглядят довольно просто: http://blog.mgechev.com/2015/09/30/lazy-loading-components-routes-services-router-angular-2

но как бы вы выполнили этот сценарий без маршрутов? Вы бы порекомендовали что-то вроде webpack, или я должен держать requireJS? Есть что-то вроде OClazyload для Angular 2? Или это работает как-то с Angular 2 даже без каких-либо фреймворков?

Я друг "держу это просто", и я действительно хотел бы сохранить его как можно малым и простым.

Спасибо!

Ответы

Ответ 1

Angular 2 основан на веб-компонентах. Самый простой способ ( "держите его простым", как вы сказали), использует маршруты и компоненты. Вы также можете загружать компоненты, просто используя директивы в своем html. например:

@Component({
  selector: 'my-component', // directive name
  templateUrl: './app/my.component.html',
  directives: []
})
export class MyComponent {}



@Component({
  selector: 'root-component', // directive name
  directives: [MyComponent],
  template: '<my-component></my-component>',
})
export class myComponent {}

если вы измените свой шаблон на динамическое включение <my-component>, он будет динамически загружать компонент. Это не лучшая практика.

существует динамический компонентный загрузчик для angular 2, но это не так просто, как использование маршрутов или директив. он создаст экземпляр компонента и добавит его в контейнер представления, расположенный внутри представления компонента другого экземпляра компонента.

с ним вы можете использовать:

@Component({
  selector: 'child-component',
  template: 'Child'
})
class ChildComponent {
}
@Component({
  selector: 'my-app',
  template: 'Parent (<child id="child"></child>)'
})
class MyApp {
  constructor(dcl: DynamicComponentLoader, injector: Injector) {
    dcl.loadAsRoot(ChildComponent, '#child', injector);
  }
}
bootstrap(MyApp);

В результате DOM:

<my-app>
  Parent (
    <child id="child">Child</child>
  )
</my-app>

Существует еще одна опция (см. ссылку angular2 выше), в которой вы можете предоставить поставщикам возможность настроить инжектор, подготовленный для этого экземпляра компонента.

Надеюсь, что это поможет.

Ответ 2

С angular 2 Последней версией мы можем использовать свойство loadchildren для выполнения ленивой загрузки. Например:   {       путь: "Клиент",       loadChildren: './customer.module#Customer2Module?chunkName=Customer'   },

В этом примере я использую webpack Bundling (angular 2 загрузчик маршрутизатора) + Anguar 2 Маршрутизация для ленивой загрузки модулей.

Ответ 3

https://medium.com/@daviddentoom/angular-2-lazy-loading-with-webpack-d25fe71c29c1#.582uw0wac

Предположим, что у нас есть две страницы в нашем приложении: "home" и "about". Некоторые люди могут никогда не дойти до страницы, поэтому имеет смысл только обслуживать нагрузку на странице тем людям, которые на самом деле нуждаются в ней. Здесь мы будем использовать ленивую загрузку.