javascript - मैं Angular2 ऐप्स के लोड प्रदर्शन को कैसे सुधार सकता हूं?




performance angular2-routing (4)

आपके संपूर्ण कोड आधार और बैकएंड के बिना आपके द्वारा की जा रही सटीक समस्या का निदान करना मुश्किल है (जैसा कि अन्य ने सुझाव दिया है, समस्या बिल्कुल कोणीय नहीं हो सकती है)।

यह कहने के बाद कि, मैं आपको angular-cli का उपयोग शुरू करने की अत्यधिक सलाह देता हूं। यह कोणीय टीम द्वारा डिज़ाइन किया गया था जो आपको एक आसान-से-उपयोग कमांड लाइन इंटरफ़ेस में सभी चीजों को पूरा करने के लिए आवश्यक है। तो मेरा जवाब कोणीय-क्ली के उपयोग पर विधेय है।

उत्पादन के लिए अपनी एनजी 2 परियोजना को अनुकूलित करने के लिए आप यहां सामान्य चीजें कर सकते हैं:

1) समय से आगे (एओटी) संकलन - बंडलिंग / न्यूनतम / पेड़-झटकों

देखो, इन सभी चीजों को पूरा करने के लिए गूलर कार्यों का एक गुच्छा कॉन्फ़िगर करने के सिरदर्द के बारे में भूल जाओ। कोणीय-क्लि एक आसान चरण में बंडलिंग / न्यूनतम / ट्री-शेकिंग / एओटी संकलन को संभालता है:

एनजी बिल्ड -prod -aot

यह आपके "डिस्ट" फोल्डर में निम्न जेएस फाइलें उत्पन्न करेगा:

inline.d41d8cd98f00b204e980.bundle.js
vendor.d41d8cd98f00b204e980.bundle.js
main.d41d8cd98f00b204e980.bundle.js
styles.4cec2bc5d44c66b4929ab2bb9c4d8efa.bundle.css
अधिक अनुकूलन के लिए आपको इन फ़ाइलों के gzipped संस्करण भी मिलेंगे:

inline.d41d8cd98f00b204e980.bundle.js.gz
vendor.d41d8cd98f00b204e980.bundle.js.gz
main.d41d8cd98f00b204e980.bundle.js.gz

कोणीय का एओटी संकलन स्वचालित रूप से आपके कोड पर "ट्री शेकिंग" करेगा और किसी भी अप्रयुक्त संदर्भ से छुटकारा पा सकता है। उदाहरण के लिए, आप अपनी परियोजना में लॉश का उपयोग कर सकते हैं, लेकिन आप शायद केवल कुछ लॉश कार्यों का उपयोग करते हैं; पेड़ हिलाना अपने अंतिम निर्माण में जरूरत नहीं है कि सभी लश के अप्रयुक्त भागों को दूर कर देगा। और सबसे महत्वपूर्ण बात, एओटी संकलन आपके सभी कोड और विचारों को पूर्व-संकलित करेगा, जिसका अर्थ है कि कम से कम ब्राउज़र को एनजी 2 ऐप रोलिंग प्राप्त करने की आवश्यकता है। कोणीय के एओटी संकलन के बारे में अधिक जानकारी के लिए this

2) अपने ऐप के आलसी लोडिंग पार्ट्स यदि आप अपने ऐप को अलग-अलग हिस्सों में आगे बढ़ाते हैं, तो आपको अपने ऐप को पहले लोड करने पर हर बार लोड करने की आवश्यकता नहीं है। आप अपने एप्लिकेशन के लिए अलग-अलग मॉड्यूल निर्दिष्ट कर सकते हैं जो तब बंडल किया जा सकता है (कोणीय-क्ली एओटी कंपाइलर द्वारा) अलग-अलग हिस्सों में। अपने प्रोजेक्ट को मॉड्यूल में व्यवस्थित करने के तरीके के बारे में जानने के लिए angular.io/docs/ts/latest/guide/ngmodule.html पढ़ें, जिसे आप उन चुक्स में संकलित कर सकते हैं जो केवल ASED लोडेड हैं। कोणीय-क्लि आपके लिए इन विखंडों के निर्माण का प्रबंधन करेगा।

3) कोणीय यूनिवर्सल अब अगर आप वास्तव में अपने लोड समय को तेज बनाना चाहते हैं तो आप कोणीय यूनिवर्सल को लागू करने पर विचार करना चाहेंगे, जो तब होता है जब आप अपने प्रारंभिक दृश्य को सर्वर पर संकलित करते हैं। मैंने कोणीय यूनिवर्सल का उपयोग नहीं किया है क्योंकि मैं चरण 1 और 2 के साथ तेजी से लोड समय प्राप्त करने में सक्षम हूं। लेकिन यह ng2 टूलसेट में एक रोमांचक विकल्प है। ध्यान रखें कि आप सर्वर पर ng2 ऐप को संकलित या चला नहीं रहे हैं, आप प्रारंभिक दृश्य सर्वरसाइड को संकलित करते हैं ताकि उपयोगकर्ता को जल्दी से html का झटका मिले और इस प्रकार उपयोगकर्ता लोड होने का समय बहुत तेज़ हो (भले ही एक पूर्ण भार हो अभी भी थोड़ा पीछे रह जाएगा)। यह कदम अन्य चरणों की आवश्यकता को कम नहीं करता है। एक बोनस के रूप में, कोणीय यूनिवर्सल भी एसईओ के साथ मदद करने वाला है।

4) माध्यमिक बंडलिंग

यदि मैं आलसी लोडिंग का उपयोग नहीं कर रहा हूं, तो मैं आमतौर पर आगे बढ़ता हूं और एओटी संकलन से उत्पन्न वितरण फाइलों को बंडल करता हूं। इस प्रकार मैं एक main.bundle.js फ़ाइल बनाता हूं जो इनलाइन को जमा करता है। js, seller.js और main.js फाइलें। मैं इसके लिए गल्प का इस्तेमाल करता हूं।

Angular2 ऐप धीमी गति से लोड हो रहा है, मैं लोड पर प्रदर्शन कैसे सुधार सकता हूं?

मैं Angular2, html5 के साथ टाइपस्क्रिप्ट का उपयोग करता हूं।

वर्तमान में मेरे ऐप को लोड होने में 4 सेकंड का समय लगता है। मैं फायरबेस के साथ होस्ट करता हूं और क्लाउडफेयर का उपयोग करता हूं।

चीजें जो मैं कर रहा हूं / जानकारी:

  • मैंने कंप्रेस्ड इमेजेस ली हैं।
  • मैं सी.एस.
  • मैं js को छोटा करता हूं।
  • मैं अपनी स्क्रिप्ट्स पर async का उपयोग करता हूं।
  • मेरी स्क्रिप्ट्स मेरे अंदर हैं।
  • स्क्रिप्ट 700kb के आसपास हैं
  • मैंने Google गति परीक्षण का उपयोग किया और 65% प्राप्त किया
  • मैंने उपयोग किए गए लिबास के उदाहरण के लिए मैं बूटस्ट्रैप आदि का उपयोग किया।
  • Systemjs का उपयोग करना।
  • यह बीज ऐप im का उपयोग कर रहा है: https://github.com/mgechev/angular-seed

बहे:

जब ऐप लोड होता है तो यह नीली स्क्रीन दिखाता है (यह बूटस्ट्रैप css है) और फिर 4 सेकंड बाद ऐप लोड होता है और वास्तव में तेजी से काम करता है। लेकिन लोड करने में 4 सेकंड लगते हैं। ऐसा लगता है कि app.js फ़ाइल जो systemjs को बताता है कि पूरे ऐप को धीमा कर रही है, और विचारों को तेज़ी से नहीं दिखा रही है।

यह मेरी वेबसाइट गति परीक्षण है: https://www.webpagetest.org/result/161206_F5_N87/

यह मेरी वेबसाइट है:

https://thepoolcover.co.uk/

मुझे बताएं कि क्या आपको मेरे ऐप और मेरे द्वारा की जाने वाली अन्य चीजों के बारे में अधिक जानकारी चाहिए।


एक सिंगल पेज एप्लिकेशन को लोड करते समय आमतौर पर अधिक समय लगता है क्योंकि यह सभी आवश्यक चीजों को एक साथ लोड करता है।

मैंने भी इसी समस्या का सामना किया था और मेरी टीम ने निम्नलिखित तरीकों का उपयोग करके हमारी परियोजना को 8 सेकंड से 2 सेकंड में लोड करने से अनुकूलित किया है।

  1. एक मॉड्यूल लोड करने में आलसी: आलसी लोडिंग मॉड्यूल स्टार्टअप समय को कम करने में मदद करता है। आलसी लोडिंग के साथ हमारे एप्लिकेशन को एक बार में सब कुछ लोड करने की आवश्यकता नहीं होती है, यह केवल उस लोड करने की आवश्यकता है जो उपयोगकर्ता यह देखने की उम्मीद करता है कि ऐप पहले लोड कब होता है। उपयोगकर्ता जो उनके मार्गों पर नेविगेट करते हैं, वे मॉड्यूल केवल आलसी लोड किए गए हैं। Angular2 ने अपनी अंतिम रिलीज़ RC5 में मॉड्यूल पेश किए हैं। चरण-दर-चरण मार्गदर्शिका के लिए नीचे देखें।

  2. एओटी संकलन: एओटी के साथ, ब्राउज़र एप्लिकेशन के पूर्व-संकलित संस्करण को डाउनलोड करता है। ब्राउज़र निष्पादन योग्य कोड को लोड करता है, इसलिए यह एप्लिकेशन को पहले संकलित किए बिना तुरंत आवेदन प्रस्तुत कर सकता है।

    यह पेलोड के आकार को कम करता है: यदि ऐप पहले से ही संकलित है तो कोणीय संकलक को डाउनलोड करने की कोई आवश्यकता नहीं है। कंपाइलर अपने आप ही कोणीय का आधा हिस्सा है, इसलिए इसे नाटकीय रूप से छोड़ने से एप्लिकेशन पेलोड कम हो जाता है। अधिक जानकारी के लिए this देखें।

  3. वेबपैक: वेबपैक एक लोकप्रिय मॉड्यूल बंडल है, जो सुविधाजनक स्रोत में अनुप्रयोग स्रोत कोड को बंडल करने के लिए और उस कोड को एक ब्राउज़र में सर्वर से लोड करने के लिए एक उपकरण है। आप अपने कोणीय 2 वेब अनुप्रयोग को वेबपैक ( इस गाइड को देखें) से कॉन्फ़िगर कर सकते हैं।

  4. Index.html से स्क्रिप्ट, स्टाइलशीट निकालें : उन सभी स्क्रिप्ट और स्टाइलशीट को हटा दें, जिनकी index.html में जरूरत नहीं है। आप किसी सेवा को कॉल करके घटक में स्वयं इन स्क्रिप्ट को लोड कर सकते हैं।

    एक फ़ाइल script.service.ts बनाएँ जो उस घटक की मांग पर किसी भी स्क्रिप्ट को लोड कर सकती है

\ script.service.ts

import { Injectable } from '@angular/core';
declare var document: any;

@Injectable()
export class Script {

  loadScript(path: string) {
    //load script
    return new Promise((resolve, reject) => {
      let script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = path;
      if (script.readyState) {  //IE
        script.onreadystatechange = () => {
          if (script.readyState === "loaded" || script.readyState === "complete") {
            script.onreadystatechange = null;
            resolve({ loaded: true, status: 'Loaded' });
          }
        };
      } else {  //Others
          script.onload = () => {
            resolve({ loaded: true, status: 'Loaded' });
          };
      };
      script.onerror = (error: any) => resolve({ loaded: false, status: 'Loaded' });
      document.getElementsByTagName('head')[0].appendChild(script);
    });
  }
}

यह स्क्रिप्ट को गतिशील रूप से लोड करने के लिए सिर्फ एक नमूना कोड है, आप अपनी आवश्यकता के अनुसार इसे अपने आप से अनुकूलित और अनुकूलित कर सकते हैं। स्टाइलशीट के लिए आपको स्टाइलयूआरएल का उपयोग करके इसे घटक में लोड करना चाहिए।

  1. ब्राउज़र कैशिंग का उपयोग करें: जब आप ब्राउज़र कैशिंग का उपयोग करते हैं तो आपकी वेबपेज फ़ाइलें ब्राउज़र कैश में संग्रहीत हो जाएंगी। आपके पृष्ठ बार-बार आने वाले आगंतुकों के लिए बहुत तेज़ी से लोड होंगे और इसलिए अन्य पृष्ठ भी उन्हीं संसाधनों को साझा करेंगे। अधिक जानकारी के लिए https://varvy.com/pagespeed/leverage-browser-caching.html

  2. app.component.ts में कोड को कम करें : app.component.ts में मौजूद कोड को कम से कम करें जो हमेशा ऐप लोड या लोड होने पर चलता है।

  3. ऐप पर डेटा सेट करें इनिशियलाइज़ेशन: यदि आप अपने प्रोजेक्ट में या कंपोनेंट्स में कई बार एक ही एपीआई कॉल का उपयोग कर रहे हैं, या आप एक से अधिक कॉल करने के बजाय कई कंपोनेंट में एक ही डेटा पर निर्भर हैं, तो आप डेटा के रूप में एक ऑब्जेक्ट के रूप में बचा सकते हैं। अनुप्रयोग आरंभीकरण पर सेवा में यह सेवा पूरे प्रोजेक्ट में एक सिंगलटन के रूप में कार्य करेगी और आप बिना कॉल किए उस डेटा तक पहुंच सकते हैं।

मॉड्यूल के आलसी लोडिंग कदम से कदम

  1. मॉड्यूलर संरचना: हमें अपने ऐप को अलग-अलग मॉड्यूल में विभाजित करना होगा। उदाहरण के लिए एक ऐप में एक उपयोगकर्ता पक्ष और एक व्यवस्थापक पक्ष हो सकता है और प्रत्येक के अपने अलग-अलग घटक और मार्ग होंगे, इसलिए हम इस दो पक्षों को मॉड्यूल admin.module.ts और user.module.ts में अलग करेंगे।

  2. रूट मॉड्यूल: प्रत्येक कोणीय ऐप में एक रूट मॉड्यूल वर्ग होता है। अधिवेशन के अनुसार, यह App.module.ts नामक फ़ाइल में AppModule नामक एक वर्ग है, यह मॉड्यूल उपरोक्त दो मॉड्यूल और बूटस्ट्रैप के लिए AppComponent भी आयात करेगा। आप अपनी आवश्यकता के अनुसार कई घटक भी घोषित कर सकते हैं। App.module.ts में नमूना कोड:

\ app.module.ts

import { NgModule } from '@angular/core';
import { UserModule } from './user/user.module';
import { AdminModule } from './admin/admin.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login.component';

@NgModule({
  imports: [UserModule, AdminModule],
  declarations: [AppComponent, LoginComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }
  1. रूट: अब आपके मार्गों में आप निम्नलिखित की तरह निर्दिष्ट कर सकते हैं

\ app.router.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login.component';

const routes: Routes = [
  { path: 'login', component: 'LoginComponent' }, //eager loaded
  { path: 'admin', loadChildren: './admin/admin.module#AdminModule' }, // Lazy loaded module
  { path: 'user', loadChildren: './user/user.module#UserModule' }  //lazy loaded module
];

अब जब एप्लिकेशन लोड होता है, तो यह केवल LoginComponent और AppComponent कोड लोड करेगा। ये मॉड्यूल केवल तब लोड किए जाएंगे जब हम / व्यवस्थापक या उपयोगकर्ता मार्गों पर जाएँ। इसलिए यह ब्राउज़र में लोड करने के लिए पेलोड के आकार को कम करेगा, इस प्रकार तेजी से लोड हो रहा है।

  1. घोंसले के शिकार मॉड्यूल: app.module की तरह ही हर मॉड्यूल में घटकों और मार्गों का अपना सेट होता है। जैसे-जैसे आपकी परियोजना बड़ी होती जाती है, मॉड्यूल के अंदर मॉड्यूल का घोंसला अनुकूलित करने का सबसे अच्छा तरीका है क्योंकि जब भी हमें आवश्यकता होती है हम उन मॉड्यूल को लोड कर सकते हैं।

कृपया ध्यान दें

उपरोक्त कोड केवल स्पष्टीकरण के लिए है, कृपया पूर्ण उदाहरण के लिए https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html


क्योंकि इसकी एसपीए और कोणीय 2 इनिट बहुत धीमी है। बस। प्लस RXjs, पोलिफ़िल्स के टन आदि AOT मदद कर सकते हैं लेकिन बहुत से कोणीय 2 लिबास इसके साथ काम नहीं करते हैं। कोणीय सार्वभौमिक आसानी से मदद करता है


ng serve --sourcemap=false चलाकर स्रोत के नक्शे को अक्षम करने का प्रयास करें





systemjs