Mon application angular 2 prend beaucoup de temps à charger pour les nouveaux utilisateurs, j'ai besoin d'aide pour l'accélérer

Question

Ci-dessous, j'ai collé dans mon fichier app.ts.

J'utilise angular2, avec Firebase et TypeScript.

La raison est-elle lente parce que j'ai beaucoup de routes et que j'injecte beaucoup de fichiers?

En outre, mon application fonctionne correctement, c’est uniquement pour les utilisateurs novices qui visitent la page d’accueil pour laquelle j'ai ce numéro.

Je ne sais pas si le bootstrap peut être amélioré en bas ou si je fais quelque chose de mal.

Ceci est mon fichier app.ts:

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]);

Answer 1

Pour que quelque chose soit prêt pour la production (et l’accélérer), vous devez l’emballer.

Je veux dire transpiler tous les fichiers en JavaScript et les concaténer de la même manière que Angular2 par exemple. De cette façon, vous aurez plusieurs modules contenus dans un seul fichier JS. De cette façon, vous réduirez le nombre d'appels HTTP pour charger le code de votre application dans le navigateur.

En fait, pour la configuration suivante de SystemJS, vous aurez un appel par module (adapté au développement mais peu efficace en production):

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

Cette réponse pourrait donner des indications sur le fonctionnement de la résolution de module:

• Comment Angular2 résout-il les importations?

Vous pouvez faire cet emballage en utilisant Gulp et ses plugins:

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

Voir les réponses suivantes:

• tilisation de Gulp pour concaténer et modifier des fichiers
• https://github.com/JavascriptMick/angular2-gulp-TypeScript/blob/master/gulpfile.js

Answer 2

Bien que tard, pour les gens qui viennent ici maintenant ... si vous utilisez angular2 + alors essayez

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

Il fera AoT, regroupant le contournement du cache et la minification en une seule commande. Plus de deatils peuvent être trouvés dans Angular officiel dans ng build section . Dans mon cas, l’un des chunk était en fait de 2,4 Mo, ce qui a été réduit à 450 ko mais après avoir inclus --prod il a encore été réduit à 200 + Ko

Bonne taille pour une application dépend. Angular2 a le concept de chargement paresseux de code ou de découpage . Vous pouvez diviser votre application en morceaux (tels que l'interface utilisateur d'administration et l'interface utilisateur) et les charger à la demande, de sorte que l'application entière ne doive pas être chargée initialement, ce qui contribuera à réduire le temps de chargement. Les articles suivants pourraient être d'une aide supplémentaire:

• 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/

Answer 3

J'ai rencontré le même problème. En gros, il vous suffit d'exécuter la version Webpack en mode production.

Pour ce faire, installez webpack globaly npm install webpack -g Une fois installé, lancez webpack -p depuis le répertoire racine de vos applications. Cela a ramené la taille de mon fichier de plus de 5 Mo à environ 700 Ko.

Answer 4

Votre problème est probablement lié à la taille du fichier remis au client. 6,9 Mo est énorme en termes de réseau et de temps d'analyse/d'évaluation.

Suggestions:

1. Minify votre application
2. Divisez-le en plusieurs bundles (vendors.js, core.js, ...)

Answer 5

Une autre approche possible pour accélérer votre application consiste à utiliser Chargement paresseux

Ainsi, votre appModule réduira les importations et les modules seront appelés à la demande.