Как повысить производительность загрузки приложений Angular2?

Ответ 1

Как насчет "расщепления кода".

С сайта Webpack:

"Для больших веб-приложений неэффективно помещать весь код в один файл, особенно если некоторые блоки кода нужны только при определенных обстоятельствах. В Webpack есть функция разделить вашу кодовую базу на" куски ", которые загружаются по требованию Некоторые другие связки называют их" слоями "," накопителями "или" фрагментами ". Эта функция называется" разделение кода".

Ссылка здесь:

https://webpack.github.io/docs/code-splitting.html

Обратите внимание, что CLI Angular использует Webpack.

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

Ответ 2

Одностраничное приложение обычно занимает больше времени при загрузке, так как оно загружает все необходимые вещи сразу.

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

• Ленивая загрузка модуля:. Ленивые модули загрузки помогают уменьшить время запуска. При ленивой загрузке нашему приложению не нужно загружать все сразу, ему нужно только загрузить то, что пользователь ожидает увидеть, когда приложение загружается первым. Модули, которые лениво загружаются, загружаются только тогда, когда пользователь переходит к своим маршрутам. Angular2 представил модули в своем окончательном релизе RC5. См. ниже шаг за шагом.

• Компиляция Aot: В AoT браузер загружает предварительно скомпилированную версию приложения. Браузер загружает исполняемый код, чтобы он мог визуализировать приложение немедленно, не ожидая, чтобы сначала скомпилировать приложение.

  Он уменьшает размер полезной нагрузки: нет необходимости загружать компилятор Angular, если приложение уже скомпилировано. Компилятор составляет примерно половину самого Angular, поэтому его отсутствие значительно снижает полезную нагрузку приложения. Для получения дополнительной информации см. this.

• Webpack: Webpack - популярный модуль-пакет, инструмент для связывания исходного кода приложения в удобных кусках и для загрузки этого кода с сервера в браузер. Вы можете настроить веб-приложение Angular 2 с помощью webpack (см. это руководство).

• Удалить скрипты, таблицу стилей из index.html: Удалить все сценарии и таблицы стилей, которые не нужны в index.html. Вы можете динамически загрузить эти script в самом компоненте, вызвав службу.

  Сделайте файл script.service.ts, который может загрузить любой script по запросу для этого компонента

\ script.service.ts

import { Injectable } from '@angular/core';
declare var document: any;

@Injectable()
export class Script {

  loadScript(path: string) {
    //load script
    return new Promise((resolve, reject) => {
      let script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = path;
      if (script.readyState) {  //IE
        script.onreadystatechange = () => {
          if (script.readyState === "loaded" || script.readyState === "complete") {
            script.onreadystatechange = null;
            resolve({ loaded: true, status: 'Loaded' });
          }
        };
      } else {  //Others
          script.onload = () => {
            resolve({ loaded: true, status: 'Loaded' });
          };
      };
      script.onerror = (error: any) => resolve({ loaded: false, status: 'Loaded' });
      document.getElementsByTagName('head')[0].appendChild(script);
    });
  }
}

Это всего лишь образец кода для динамического загрузки script, вы можете настроить его и оптимизировать самостоятельно в соответствии с вашими потребностями. Для таблицы стилей вы должны загрузить ее в компоненте с помощью styleUrl.

5. Использовать кеширование браузера: Файлы вашей веб-страницы будут храниться в кеше браузера при использовании кеширования браузера. Ваши страницы будут загружаться намного быстрее для повторных посетителей, а также другие страницы, которые будут использовать те же ресурсы. Для получения дополнительной информации https://varvy.com/pagespeed/leverage-browser-caching.html

6. минимизировать код в app.component.ts: свести к минимуму код, присутствующий в app.component.ts, который всегда запускается, когда приложение загружается или перезагружается.

7. установить данные в приложении Инициализация:, если вы используете одни и те же вызовы api несколько раз в своем проекте или в компонентах, или вы зависите от одних и тех же данных в нескольких компонентах, вместо того, чтобы вызывать api несколько раз, что вы можете сделать, это сохранить данные как объект в службе при инициализации приложения. Эта услуга будет действовать как единое целое по всему проекту, и вы может получить доступ к этим данным без вызова api.

   ---

Постепенная загрузка модулей шаг за шагом

• Модульная структура:. Мы должны разделить наше приложение на отдельные модули. Например, приложение может иметь пользовательскую сторону и административную сторону, и каждый из них будет иметь свои собственные компоненты и маршруты, поэтому мы разделим эти две стороны на модули admin.module.ts и user.module.ts.

• Корневой модуль: Каждое приложение Angular имеет класс корневого модуля. По соглашению это класс под названием AppModule в файле с именем app.module.ts, этот модуль будет импортировать два вышеуказанных модуля, а также AppComponent для начальной загрузки. Вы также можете объявить несколько компонентов в соответствии с вашими потребностями. Пример кода в app.module.ts:

\ app.module.ts

import { NgModule } from '@angular/core';
import { UserModule } from './user/user.module';
import { AdminModule } from './admin/admin.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login.component';

@NgModule({
  imports: [UserModule, AdminModule],
  declarations: [AppComponent, LoginComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. Маршруты: Теперь на ваших маршрутах вы можете указать следующие

\ app.router.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login.component';

const routes: Routes = [
  { path: 'login', component: 'LoginComponent' }, //eager loaded
  { path: 'admin', loadChildren: './admin/admin.module#AdminModule' }, // Lazy loaded module
  { path: 'user', loadChildren: './user/user.module#UserModule' }  //lazy loaded module
];

Теперь, когда приложение загружается, оно будет загружать только код LoginComponent и AppComponent. Эти модули будут загружаться только при посещении /admin или/пользовательских маршрутов. Следовательно, это уменьшит размер полезной нагрузки для загрузки в браузер, что приведет к быстрой загрузке.

4. Вложенные модули:Так же, как app.module, каждый модуль имеет свой собственный набор компонентов и маршрутов. По мере того как ваш проект становится больше, вложенность модулей внутри модуля - лучший способ оптимизации, потому что мы можем лениво загружать эти модули всякий раз, когда нам нужно.

   ---

ОБРАТИТЕ ВНИМАНИЕ

Выше код предназначен только для объяснения, пожалуйста, обратитесь к полному примеру https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html

Ответ 3

Трудно диагностировать точную проблему, с которой вы сталкиваетесь, без всякой кодовой базы и бэкэнд (как предполагали другие, проблема может быть не совсем угловатой).

Сказав это, я настоятельно рекомендую вам начать использовать угловую кли. Он был разработан угловой командой, чтобы выполнить все, что вам нужно сделать в удобном интерфейсе командной строки. Поэтому мой ответ основан на использовании углового кли.

Вот основные вещи, которые вы можете сделать, чтобы оптимизировать проект ng2 для производства:

1) Вперед времени (AoT) Компиляция - Объединение/Минирование/Встряхивание деревьев

Послушайте, забудьте о головной боли, чтобы настроить кучу задач глотки, чтобы выполнить все эти вещи. Ручки углового-cli Bundling/Minification/Tree-shaking/AOT-компиляция за один простой шаг:

ng build -prod -aot

Это создаст следующие js файлы в вашей папке "dist":

inline.d41d8cd98f00b204e980.bundle.js
vendor.d41d8cd98f00b204e980.bundle.js
main.d41d8cd98f00b204e980.bundle.js
styles.4cec2bc5d44c66b4929ab2bb9c4d8efa.bundle.css

Ответ 4

потому что его SPA и angular 2 init слишком медленны. это оно. плюс RXjs, тонны полифилов и т.д. AOT может помочь, но многие из angular2 libs не работают с ним. angular универсальная помощь помогает

Ответ 5

Попробуйте отключить исходные карты, запустив ng serve --sourcemap=false