typescript - Angular 2 uygulamam ilk kez kullanan kullanıcılar için uzun zaman alıyor, hızlandırmak için yardıma ihtiyacım var

Aşağıya app.ts dosyamı yapıştırdım.

Angular2, Firebase ve TypeScript kullanıyorum.

Yavaş olmasının nedeni çok sayıda rotamın olması ve çok sayıda dosya enjekte etmem mi?

Ayrıca, uygulamam sorunsuz çalışıyor; bu sorun sadece ana sayfayı ilk kez ziyaret eden kullanıcılar için oluyor.

Bootstrap'un en altta iyileştirilebilir olup olmadığından ya da herhangi bir yanlış yapıp yapmadığımdan emin değilim.

Bu benim app.ts dosyam:

import {Component, bind, provide, Injectable} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser'
import {NgIf} from 'angular2/common';
import {Router, Location, ROUTER_BINDINGS, RouterOutlet, RouteConfig, RouterLink, ROUTER_PROVIDERS, APP_BASE_HREF, CanActivate, OnActivate,
    ComponentInstruction} from 'angular2/router';
import {HTTP_PROVIDERS, Http, Headers} from 'angular2/http';
import {ANGULAR2_GOOGLE_MAPS_PROVIDERS} from 'angular2-google-maps/core';
import {enableProdMode} from 'angular2/core';
enableProdMode();

import {LoggedInRouterOutlet} from './interceptor';

import {AuthService} from './services/authService/authService';
import {SocialService} from './services/socialService/socialService';
import {UserService} from './services/userService/userService';
import {OrganisationService} from './services/organisationService/organisationService';
import {NotificationService} from './services/notificationService/notificationService';
import {EmailService} from './services/emailService/emailService';

import {UserProfile} from './models/profile/profile';
import {Organisation} from './models/organisation/organisation';

import {HeaderNavigation} from './components/header/header';
import {HeaderNavigationLoggedIn} from './components/header/headerNavigationLoggedIn';
import {HeaderNavigationLoggedInCompany} from './components/header/headerNavigationLoggedInCompany';
import {Footer} from './components/footer/footer';
import {SideMenuCompany} from './components/header/sideMenuCompany';
import {SideMenuUser} from './components/header/sideMenuUser';
import {Splash} from './components/splash/splash';

import {CreateJob} from './components/createJob/createJob';
import {SearchJobs} from './components/searchJobs/searchJobs';
import {Login} from './components/login/login';
import {Applications} from './components/applications/applications';
import {Register} from './components/register/register';
import {ForgotPassword} from './components/forgotpassword/forgotpassword';
import {ChangePassword} from './components/changepassword/changepassword';
import {ChangeEmail} from './components/changeemail/changeemail';
import {SocialRegister} from './components/socialregister/socialregister';
import {Admin} from './components/admin/admin';
import {Contact} from './components/contact/contact';
import {SearchUsers} from './components/searchusers/searchusers';

import {Jobs} from './components/job/jobs';
import {CompanyProfile} from './components/company/company';
import {Home} from './components/home/home';
import {Dashboard} from './components/dashboard/dashboard';
import {Profile} from './components/profile/profile';
import {UserApplications} from './components/userApplications/userApplications';

@Component({
    selector: 'app',
    providers: [UserService, UserProfile, OrganisationService, Organisation],
    template: `

        <Splash *ngIf="isLoggedIn"></Splash>    

        <HeaderNavigation *ngIf="!isLoggedIn"></HeaderNavigation>       

        <HeaderNavigationLoggedIn *ngIf="isLoggedIn && isUserLogin"></HeaderNavigationLoggedIn>
        <HeaderNavigationLoggedInCompany *ngIf="isLoggedIn && isCompanyLogin"></HeaderNavigationLoggedInCompany>

        <SideMenuCompany *ngIf="isLoggedIn && isCompanyLogin"></SideMenuCompany>
        <SideMenuUser *ngIf="isLoggedIn && isUserLogin"></SideMenuUser>

        <div class="content">
            <router-outlet></router-outlet> 
        </div>     
    `,
    directives: [RouterOutlet, RouterLink, Splash, HeaderNavigation, HeaderNavigationLoggedIn, NgIf, HeaderNavigationLoggedInCompany, SideMenuCompany, SideMenuUser, Footer, LoggedInRouterOutlet]
})

@RouteConfig([
    { path: '/', component: Home, as: 'Home', data:{title: 'Welcome Home'}},
    { path: '/home', component: Home, as: 'Home', useAsDefault: true},
    { path: '/login', component: Login, as: 'Login' },  
    { path: '/register/:id', component: Register, as: 'Register' },
    { path: '/forgotpassword', component: ForgotPassword, as: 'ForgotPassword' },
    { path: '/dashboard', component: Dashboard, as: 'Dashboard' },
    { path: '/search', component: SearchJobs, as: 'Search' },   
    { path: '/profile', component: Profile, as: 'Profile' },
    { path: '/settings', component: CompanyProfile, as: 'Settings' },
    { path: '/jobs', component: Jobs, as: 'Jobs' },
    { path: '/password', component: ChangePassword, as: 'Password' },
    { path: '/email', component: ChangeEmail, as: 'Email' },
    { path: '/applications', component: Applications, as: 'Applications' },
    { path: '/socialRegister/:id', component: SocialRegister, as: 'SocialRegister' },
    { path: '/socialRegister', component: SocialRegister, as: 'SocialRegister' },
    { path: '/applys', component: UserApplications, as: 'Applys' },
    { path: '/contact', component: Contact, as: 'Contact' },
    { path: '/searchTeachers', component: SearchUsers, as: 'SearchUsers' },
    { path: '/createJob', component: CreateJob, as: 'CreateJob' },
    { path: '/adminmarkchris2016', component: Admin, as: 'AdminMarkChris2016' },

    { path:'/**', redirectTo: ['Home']}
])

@Injectable()

export class AppComponent {
    router: Router;
    location: Location;
    authService: AuthService;
    userService: UserService
    isLoggedIn: boolean = false;
    isCompanyLogin: boolean = false;
    isUserLogin: boolean = false;
    userProfile: UserProfile;   

    constructor(_router: Router, _location: Location, _authService: AuthService, _userService: UserService, _userProfile: UserProfile){ 
        this.router = _router;
        this.location = _location;
        this.authService = _authService;
        this.userService = _userService;
        this.userProfile = _userProfile;

        this.isUserLoggedIn(this.location.path());

        //On refresh
        this.router.subscribe((currentRoute) => {
            this.isUserLoggedIn(currentRoute);
        })  
    }

    isUserLoggedIn(currentRoute): void{ 
        this.authService.checkIfLoggedIn().then((response) => { 
            this.isLoggedIn = response

            if(this.isLoggedIn){
                this.isUserOrganisationOrTeacher();                 
            }   

            if(currentRoute.substring(0, 14) == "socialRegister" || currentRoute == "socialRegister" || currentRoute == "home" || currentRoute == "contact" || currentRoute == "" || currentRoute == "forgotpassword" || currentRoute == "login" || currentRoute.substring(0, 8) == "register"){
                this.isCompanyLogin = false;
                this.isUserLogin = false;
                this.isLoggedIn = false;
            }           
        });  
    }

    isUserOrganisationOrTeacher(): void{
        this.userService.checkIfProfileExists().then((response) => {
            this.isCompanyLogin = false;
            this.isUserLogin = false;       

            if(response){
                this.isUserLogin = true;
                this.isCompanyLogin = false;
            }else{
                this.isCompanyLogin = true; 
                this.isUserLogin = false;                   
            }
        }); 
    }       
}

bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue: '/'}), HTTP_PROVIDERS, AuthService, SocialService, UserService, EmailService, OrganisationService, NotificationService, ANGULAR2_GOOGLE_MAPS_PROVIDERS]);

Cevap #1

Üretim için bir şeyi hazır hale getirmek (ve hızlandırmak) istiyorsanız, onu paketlemeniz gerekir.

Yani tüm dosyaları JavaScript dosyalarına dönüştürüp örneğin Angular2'nin yaptığı gibi birleştirmek istiyorum. Bu şekilde birden fazla modülü tek bir JS dosyasında toplayabilirsiniz. Bu yolla, uygulama kodunuzu tarayıcıya yüklemek için yapılan HTTP çağrılarının sayısını azaltırsınız.

Aslında, SystemJS'in aşağıdaki yapılandırması için, her modül başına bir çağrınız olacak (bu geliştirme için uygundur ama üretimde gerçekten verimli değildir):

    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

Bu cevap, modül çözümlemenin nasıl çalıştığı hakkında ipuçları verebilir:

Angular2 importları nasıl çözer?

Bu paketlemeyi Gulp ve eklentilerini kullanarak yapabilirsiniz:

https://www.npmjs.com/package/gulp-tsc
https://github.com/contra/gulp-concat

Aşağıdaki cevaplara bakın:

Dosyaları Birleştirmek ve Uglify yapmak için Gulp Kullanımı
https://github.com/JavascriptMick/angular2-gulp-typescript/blob/master/gulpfile.js

Cevap #2

Geç olsa da, şu anda buraya gelen insanlar için... eğer angular2+ kullanıyorsanız denemelisiniz

ng build --prod --env=<staging or prod or your env file>

Tek bir komutla AoT, önbellek temizleme ve küçültmeyi (minification) yapacak. Daha fazla detay Angular resmi web sitesinde ng build bölümünde bulunabilir. Benim durumumda chunklardan biri aslında 2,4 MB idi ve 450+ KB'a düşürüldü, ancak --prod ekledikten sonra 200+ KB'a kadar daha da azaltıldı.

Bir uygulama için iyi boyut duruma bağlıdır. Angular2, kodun tembel yükleme veya parçalama kavramına sahiptir. Uygulamanızı parçalar halinde (örneğin yönetici arayüzü ve kullanıcı arayüzü) bölebilir ve ihtiyaca göre yükleyebilirsiniz, böylece tüm uygulamanın başlangıçta yüklenmesi gerekmez ve bu da yükleme süresinin azalmasına yardımcı olur. Aşağıdaki makaleler ekstra yardım sağlayabilir:

https://blog.waffle.io/code-splitting-in-angular-2-with-webpack-2-ce8dd4b8b23e
http://blog.rangle.io/optimize-your-angular2-application-with-tree-shaking/
http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/

typescript - Angular 2 uygulamam ilk kez kullanan kullanıcılar için uzun zaman alıyor, hızlandırmak için yardıma ihtiyacım var

Cevap #1

Cevap #2

İlgili makaleler