typescript - run - install angular 2

Mi aplicación angular 2 tarda mucho tiempo en cargarse para usuarios nuevos, necesito ayuda para acelerarla

Question

A continuación he pegado en mi archivo app.ts.

Estoy usando angular2, con firebase y mecanografiado.

¿La razón es lenta porque tengo muchas rutas y estoy inyectando muchos archivos?

Además, mi aplicación funciona bien solo para usuarios que visitan por primera vez la página principal donde tengo este problema.

No estoy seguro si el bootstrap se puede mejorar en la parte inferior o si estoy haciendo algo mal.

Este es mi archivo 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

Aunque tarde, para las personas que vienen aquí ahora ... si estás usando angular2 + entonces prueba

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

Hará AoT, agrupando la prevención de la memoria caché y la minificación, todo en un solo comando. Más deatils se pueden encontrar en el sitio web oficial de Angular en la sección ng build . En mi caso, uno de los chunk era en realidad 2.4MB que se redujo a 450 + KB pero después de incluir --prod se redujo aún más a 200 + KB

Buen tamaño para una aplicación depende. Angular2 tiene el concepto de carga lenta de código o fragmentación . Puede dividir su aplicación en fragmentos (como la interfaz de usuario de administrador y la IU de usuario) y cargarlos a pedido para que no sea necesario cargar toda la aplicación inicialmente, lo que ayudará a reducir el tiempo de carga. Los siguientes artículos podrían ser de ayuda adicional:

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

Me encontré con este mismo problema, básicamente solo necesitas ejecutar la construcción de la carpeta web en modo de producción.

Para hacer esto, instale el paquete web globaly npm install webpack -g Una vez instalado, ejecute el webpack -p desde el directorio raíz de sus aplicaciones. Esto redujo el tamaño de mi archivo de más de 5 MB a aproximadamente 700 KB

Answer 3

Para tener algo listo para la producción (y acelerarlo), debe empaquetarlo.

Me refiero a transpilar todos los archivos en JavaScript y convertirlos de la misma manera que Angular2, por ejemplo. De esta manera tendrá varios módulos contenidos en un solo archivo JS. De esta manera, reducirá el número de llamadas HTTP para cargar el código de su aplicación en el navegador.

De hecho, para la siguiente configuración de SystemJS, tendrá una llamada por módulo (es adecuada para el desarrollo pero no es realmente eficiente en producción):

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

Esta respuesta podría dar pistas sobre cómo funciona la resolución del módulo:

• ¿Cómo resuelve Angular2 las importaciones?

Puede hacer este empaque usando Gulp y sus complementos:

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

Vea las siguientes respuestas:

• Usar Gulp para concatenar y Uglify archivos
• https://github.com/JavascriptMick/angular2-gulp-typescript/blob/master/gulpfile.js

Answer 4

Su problema probablemente esté relacionado con el tamaño del archivo entregado al cliente. 6.9MB es enorme tanto en términos de red como en tiempo de análisis / evaluación.

Sugerencias:

1. Minifica tu aplicación
2. Dividirlo en múltiples paquetes (vendors.js, core.js, ...)