0
votes

Angulaire 6 Comment augmenter la vitesse de la page de charge initiale

hi, je ne peux pas comprendre la réponse de la compression gzip du serveur pour diminuer la taille JS !!!. strong> P>

  • J'ai essayé ce lien 1 , link 2 , Link 3 mais ne peut pas réussir toujours le chargement initial page trop lente. li>
  • Taille du paquet angulaire tel que Vendor.js Taille de 15 Mo, Main.Js 784KB, style.js 952kb. Li>
  • J'ai un module de routage avec des composants rendus basés sur le routeur. LI>
  • J'ai mis à jour avec package.json & angular.json dossier, je viens d'exécuter ma candidature Avec NPM, lancez la page de chargement initiale trop lente de près de 16,9 Mo transféré.Merci li> ul>

    paquet.json strong> p> xxx pré>

    angulaire.json strong> p>

        const routes: Routes = [
        {
            path: '',
            component: CfchDataTableComponent,
           //loadChildren:'./cfch-data-table/cfch-data-table.component#CfchDataTableComponent',  //lazy loaded module
            //path: '', loadChildren: () => CfchDataTableComponent,
            data: { preload: true }
    
            //pathMatch: 'full',
        },
        {
            path:'singleCompanyStockList',
            component:SingleCompanyListComponent
        },
        {
            path:'valuation',
            component:ValuationComponent
        },
        {
            path:'risk',
            component:RiskComponent
        },
        {   path:'login',
        component:LoginComponent
       },
       {   path:'register',
        component:RegisterPageComponent
       },
       {   path:'forgetPwd',
        component:ForgetPasswordComponent
       },
       {   path:'info',
        component:InfoComponent
       },
       {   path:'essentialInfo',
        component:EssentialInfoComponent
      },
    
       {    path:'manageCompany',
            //canActivate: [AuthGuard],
            component:ManageCompanyComponent
       },
    
       {   
            path:'dataManage',
            //canActivate: [AuthGuard],
            component:DatamanageComponent
       },
       {
            path:'benchmark',
            canActivate: [AuthGuard],
            component:BenchmarkingComponent
       },
       {
        path:'financeEntry',
        component:FinanceEntryComponent
       },
    
    
    
       {   path:'joinUS',
            component:JoinUsPageComponent,
       },
    
    ];
    @NgModule({
        imports: [RouterModule.forRoot(routes)
        ],
        exports: [RouterModule],
    })
    export class AppRoutingModule { }
    


5 commentaires

Quelle est la taille des paquets sur une construction de production? NG Build --Prod


Taille du paquet angulaire tel que Vendor.js Taille de 15 Mo, Main.Js 784KB, Style.js 952kb


C'est un ensemble de fournisseurs insensé - utilisez-vous l'optimiseur d'AOT Compiler / Construire? (et si non, pourquoi pas?)


J'ai mis à jour avec le fichier package.json, je viens d'exécuter mon application avec NPM Démarrer puis une page de chargement initiale trop lente de près de 16,9 Mo de taille transférée.Merci


Modifier le package.json. Changer "Build": "NG Build", "Construire": "NG Build --Prod",


3 Réponses :


3
votes

GZIP est effectué par votre serveur d'hébergement, qui sert votre application angulaire. Il n'a rien fait avec votre framework JavaScript, que ce soit angulaire ou tout autre.

Ayant cela hors de la manière dont la plupart des fournisseurs de services d'hébergement de cloud configurent la compression GZIP hors de la boîte. Mais celui que j'ai trouvé gratuit et plus facile pour les essais de projets personnels est Firebase.com de Google, qui fournit également SSL gratuitement, vous pouvez également consulter leur service d'hébergement.


6 commentaires

Je veux réduire les fichiers JS Bundle parce que le chargement initial angulaire trop lent, s'il vous plaît voir ci-dessus Résultat des résultats Console de navigateur Transfert de réseau de console 16,9 Mo, alors comment puis-je réduire la taille? Merci


Il y a une modification sur votre question liée qui s'applique à vous: Edit: semble que j'ai mal compris la question, s'il s'agit de la taille du paquet lorsque vous servez les choses à l'utilisateur final, vous devez consulter Aot + Rollup pour minimiser votre tailles de paquet. Et Activez la compression GZIP sur votre serveur Web lorsque vous servez des fichiers (probablement la plupart des serveurs l'ont déjà activé).


@Sameer pouvez-vous poster vos fichiers package.json et angular.json?


S'il vous plaît voir mon article mis à jour avec Angular.json File .Merci


OK Après avoir examiné votre module de routage, il semble que vous mettiez votre application entière dans un module, ce qui n'est pas le moyen recommandé de développer avec angulaire, car il produit de très grandes charges utiles initiales. La voie recommandée est d'utiliser le chargement paresseux, l'utilisation angulaire utilise le concept de chargement paresseux sous la forme de modules chargés paresseux que vous pouvez en lire ici dans les documents officiels ( angular.io/guide/lazy-loading-ngModules ). Et cette vidéo peut vous donner une bonne tête-start YouTube.com/watch?v=8TBQI5GRHBEO_/a >. Mais je vous suggère de lire plus sur le sujet du chargement paresseux. Bonne chance


J'ai essayé des chargements paresseux avec une stratégie personnalisée pré-chargée, même si c'est trop lent, comment augmenter la vitesse de la page de chargement avec la compression GZIP activée et NG Build -Prod-Aot?



0
votes

Activer la compilation de production en modifiant votre package.json

ceci: xxx

devrait être:

( Ajouter --Prod) xxx

Votre script Java Vendor doit être considérablement plus petit dans votre répertoire dist .

Bien sûr Ne changera pas la taille du script Java lors de l'exécution de "NPM START". C'est le mode développeur.


4 commentaires

Bonjour, après Ajouter --Prod dans Build, j'obtiens une erreur comme: "Erreur in ./src/app/app.module.ngfactory.js", j'utilise une version angulaire 6 et angulaire CLI 7 Version.Reference Essayé Mais pas de chance: Stackoverflow.com/Questions/48402695/... Mais je ne veux pas rétrograder ma dernière version.Merci


Pouvez-vous changer votre "@ angular / cli": de "7.1.4" à "6.1.0"? C'est une grave devinette. La compilation de la production est beaucoup plus stricte (une bonne chose) également ne mélange pas les versions, @ angular / animations doit être la même version que vos autres composants @angular


J'avais l'habitude de construire NG Build --Prod --Aot = Faux


Votre JS sera beaucoup plus petit, mais pas aussi petit que possible.



1
votes

** Chargement paresseux ** Vous devez modifier le module de routage de l'application sur des modules de chargement paresseux. Diminez la taille de Main.Js et Vendor.js.


0 commentaires