Задать вопрос
@Dark19
angular.js

Почему так долго грузится приложение на Angular2?

Создал приложение на Angular2, состоит всего из 2 компонентов и одного главного, изображения бэкграундов сжал, а приложение на сервере довольно таки долго загружается + ещё и при загрузки видны белые полосы загрузки бэкграунда, как будто бы оно подвисает.
Вот сайт meetkodi.com

main.ts
import{platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import{AppModule} from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Вот app.module.ts:
import{NgModule} from '@angular/core';
import{BrowserModule} from '@angular/platform-browser';
import { PerfectScrollbarModule, PerfectScrollbarConfigInterface } from 'angular2-perfect-scrollbar';

import{KodiComponent} from './kodi.component';
import{WindowComponent} from './window.component';
import{CalendarComponent} from './calendar.component';


const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
    suppressScrollX: true
};
@NgModule({
    imports: [
        BrowserModule,
        PerfectScrollbarModule.forRoot(PERFECT_SCROLLBAR_CONFIG)
    ],
    declarations: [
        KodiComponent,
        WindowComponent,
        CalendarComponent
    ],
    bootstrap: [
        KodiComponent
    ]
})
export class AppModule{

}

system.config.js
(function (global) {
    System.config({
        paths: {
            'npm:': 'node_modules/'
        },
        map: {
            app: 'app',

            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            'angular2-perfect-scrollbar': 'npm:angular2-perfect-scrollbar/lib/index.js',
            
            'rxjs': 'npm:rxjs',
        },
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>KODI</title>
        <meta name="keywords" content=""/>
        <meta name="description" content=""/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.css"/>
    
        <link rel="stylesheet" href="css/main.css"/>
    </head>
<body class="main-page">

    <div class="wrapper">
        <header class="header js-header">
            <div class="container-fluid">
                <div class="logo">
                    <img src="images/logo.png" alt="logo" />
                </div>
            </div>
        </header>
        <!-- .header-->
        <main class="content">
            <div class="container-fluid">

                <kodi></kodi>

            </div>
        </main>
        <!-- .content -->
        </div>
    <!-- .wrapper -->
    
        <footer class="footer">
        	<div class="container-fluid"></div>
        </footer>
        <!-- .footer -->

    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
        System.import('app').catch(function(err){ console.error(err); });
    </script>
    </body>
</html>

Вроде бы ничего лишнего, но почему так долго грузит? Как можно оптимизировать?
  • Вопрос задан
  • 2566 просмотров
Комментировать
Подписаться 2 Оценить Комментировать
Решения вопроса 2
@Dark19 Автор вопроса
В общем нашел неплохую статью где рассказывают как собрать приложение на продакш + есть плагин на гите с готовыми конфигами и вебпаком: https://labs.encoded.io/2016/10/24/angular-2-aot-c...
Ответ написан
Комментировать
Комментировать
yurzui
@yurzui
Я советую вам делать бандлы для продакшна

huge-number-of-files-generated-for-every-angularjs...
angular-2-how-to-bundle-for-production

Потом посмотрите в сторону AOT(Ahead-of-time compilation) Это поможет вам избавиться от compiler.umd.js и ускорит открытие страницы, так как не будет тратиться время на компиляцию в браузере.

aot-compiler
Getting your Angular 2 library ready for AoT
Ahead-of-time compilation how to
Try Angular 2 AoT compilation

И можете еще заглянуть в репозиторий

Universal Angular 2
What is Angular Universal?
Angular Universal For The Rest Of Us

Это поможет вам ускорить ваше приложение. Только я не понимаю, зачем вам для такой визитки angular2 или я еще не знаю всех скрытых возможностей приложения?

И обязательно загляните в рекомендации, которые вам скинул Максим Тимофеев. Приложение, построенное на angular2, ничем не отличается от обычного и его можно тюнинговать всеми возможными способами
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ответы на вопрос 2
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
https://developers.google.com/speed/pagespeed/insi...
Ответ написан
Комментировать
Комментировать
sniffer
@sniffer
front-end developer
Ещё один нюанс, Ваше приложение запускается в режиме разработки, об этом говорит сообщение в консоли. Попробуйте включить режим production.
stackoverflow.com/questions/35721206/how-to-enable...
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Manual QA Engineer
Proskater
от 40 000 до 60 000 ₽
Руководитель направления информационной безопасности ОКИИ
Интер РАО – Управление сервисами • Санкт-Петербург
от 180 000 ₽
Head UI/UX designer, SaaS
gro • Москва
от 3 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Несложная верстка из Figma bootstrap5 scss npm
18 дек. 2024, в 04:59
1000 руб./в час
Отправка команды на открытие всех окон автомобиля Chery Tiggo 7 Pro
18 дек. 2024, в 03:28
16000 руб./за проект
Установить музыкальный софт
18 дек. 2024, в 01:04
5000 руб./за проект
Ещё заказы