Why does it take so long to load an application on Angular2?

D

Dark192016-12-20 11:53:18

css

Dark19, 2016-12-20 11:53:18

Good afternoon! I created an application on Angular2, it consists of only 2 components and one main one, the background images are compressed, and the application on the server takes quite a long time to load + even when loading, white background loading bars are visible, as if it freezes.
Here is meetkodi.com
Here is main.ts:

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

Here is 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{

}

Here is 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);

Here is 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>

It seems to be nothing superfluous, but why does it take so long to load? How can you optimize?

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

D

Dark19, 2016-12-22
@Dark19

In general, I found a good article where they tell how to build an application for production + there is a plugin on the git with ready-made configs and webpack: https://labs.encoded.io/2016/10/24/angular-2-aot-c...

M

Maxim Timofeev, 2016-12-20
@webinar

https://developers.google.com/speed/pagespeed/insi...

S

Serg Sniffer, 2016-12-20
@sniffer

One more nuance, your application is launched in development mode, this is indicated by a message in the console. Try enabling production mode.
stackoverflow.com/questions/35721206/how-to-enable...