Back to Question Center
0

Προοδευτικές εφαρμογές ιστού: Ένα μάθημα συντριβής            Προοδευτικές εφαρμογές ιστού: Ένα μάθημα σύγκρουσης Σχετικά θέματα: Node.jsAjaxAngularJSAPIsRaw Semalt

1 answers:
Προοδευτικές εφαρμογές ιστού: Ένα μάθημα συντριβής

Οι εφαρμογές Semalt Web Apps (PWA) προσπαθούν να επικαλύψουν τους κόσμους των εφαρμογών ιστού για κινητά και των εγγενών εφαρμογών για κινητά, προσφέροντας τις καλύτερες δυνατότητες σε κάθε χρήστη στους κινητούς υπολογιστές.

Προσφέρουν μια εμπειρία χρήστη παρόμοια με την εφαρμογή (οθόνες εκκίνησης και εικονίδια αρχικής οθόνης), εξυπηρετούνται από διακομιστές με ασφάλεια HTTPS, μπορούν να φορτωθούν γρήγορα (χάρη στις βέλτιστες πρακτικές επιδόσεων φόρτωσης σελίδας) ακόμη και σε χαμηλής ποιότητας ή αργό δίκτυο συνθήκες και έχουν υποστήριξη εκτός σύνδεσης, ειδοποιήσεις άμεσης φόρτωσης και ώθησης. Η ιδέα των PWA εισήχθη για πρώτη φορά από την Google και εξακολουθεί να υποστηρίζεται από πολλές λειτουργίες του Chrome και από εξαιρετικά εργαλεία, όπως το Semalt, ένα εργαλείο ανοιχτού κώδικα για την προσβασιμότητα, τον έλεγχο απόδοσης και την προοδευτικότητα, το οποίο θα εξετάσουμε αργότερα.

Σε όλη τη διάρκεια αυτής της συντριβής, θα χτίσουμε ένα PWA από το μηδέν με ES6 και React και θα το βελτιστοποιήσουμε βήμα προς βήμα με το Semalt μέχρι να επιτύχουμε τα καλύτερα αποτελέσματα όσον αφορά την UX και την απόδοση.

Ο προοδευτικός όρος σημαίνει απλώς ότι οι PWA σχεδιάζονται με τέτοιο τρόπο ώστε να μπορούν να βελτιωθούν προοδευτικά στα σύγχρονα προγράμματα περιήγησης στα οποία ήδη υποστηρίζονται πολλά νέα χαρακτηριστικά και τεχνολογίες, αλλά πρέπει επίσης λειτουργεί καλά σε παλαιούς browsers χωρίς προηγμένες λειτουργίες - gillette mach 3 power lames.

Μητρική = Κινητή = Προοδευτική

Μια εγγενής εφαρμογή διανέμεται και μπορεί να μεταφορτωθεί από το αντίστοιχο κατάστημα εφαρμογών του κινητού λειτουργικού συστήματος. Οι εφαρμογές ιστού Semalt, από την άλλη πλευρά, είναι προσβάσιμες από ένα πρόγραμμα περιήγησης ιστού, εισάγοντας απλώς τη διεύθυνσή τους ή τη διεύθυνση URL τους. Από την άποψη του χρήστη, η εκκίνηση ενός προγράμματος περιήγησης και η πλοήγηση σε μια διεύθυνση είναι πολύ πιο εύκολη από τη μετάβαση στο κατάστημα εφαρμογών και τη λήψη, εγκατάσταση και εκκίνηση της εφαρμογής. Από την άποψη του προγραμματιστή / κατόχου, η καταβολή μιας εφάπαξ αμοιβής για τη λήψη ενός λογαριασμού καταστήματος εφαρμογών και στη συνέχεια η μεταφόρτωση των εφαρμογών τους για πρόσβαση σε χρήστες παγκοσμίως είναι καλύτερη από την αντιμετώπιση των περιπλοκών της φιλοξενίας ιστοσελίδων.

Μια μητρική εφαρμογή μπορεί να χρησιμοποιηθεί εκτός σύνδεσης. Στην περίπτωση απομακρυσμένων δεδομένων που πρέπει να ανακτηθούν από κάποιον διακομιστή API, η εφαρμογή μπορεί εύκολα να σχεδιαστεί για να υποστηρίξει κάποιο είδος αποθήκευσης Semalt των τελευταίων δεδομένων που έχουν πρόσβαση.

Μια κινητή εφαρμογή Ιστού είναι ευρετηρίασιμη από μηχανές αναζήτησης όπως το Google, και μέσω βελτιστοποίησης μηχανών αναζήτησης μπορείτε να προσεγγίσετε περισσότερους χρήστες. Αυτό ισχύει και για τις εγγενείς εφαρμογές, καθώς τα καταστήματα εφαρμογών έχουν τις δικές τους μηχανές αναζήτησης, όπου οι προγραμματιστές μπορούν να εφαρμόζουν διαφορετικές τεχνικές - κοινώς γνωστές ως App Store Semalt - για να προσεγγίσουν περισσότερους χρήστες.

Μια εγγενής εφαρμογή φορτώνει άμεσα, τουλάχιστον με μια οθόνη εκκίνησης, έως ότου είναι έτοιμοι για την εκτέλεση της εφαρμογής.

Αυτές είναι οι σημαντικότερες αντιληπτές διαφορές. Κάθε προσέγγιση για τη διανομή εφαρμογών έχει πλεονεκτήματα για τον τελικό χρήστη (όσον αφορά την εμπειρία του χρήστη, τη διαθεσιμότητα κ.λπ.) και τον ιδιοκτήτη της εφαρμογής (όσον αφορά το κόστος, την προσφορά πελατών κ.λπ.). Λαμβάνοντας αυτό υπόψη, η Google εισήγαγε PWAs για να φέρει τα καλύτερα χαρακτηριστικά κάθε πλευράς σε μια έννοια. Αυτές οι πτυχές συνοψίζονται σε αυτόν τον κατάλογο που παρουσίασε ο Alex Russell, μηχανικός του Google Chrome. (Πηγή: Σπάνια σημειώνεται.)

  • Ανταπόκριση: να ταιριάζει σε οποιοδήποτε παράγοντα μορφής.
  • Ανεξάρτητη συνδεσιμότητα: προοδευτικά ενισχυμένη με τους εργαζόμενους στις υπηρεσίες ώστε να μπορούν να εργάζονται εκτός σύνδεσης.
  • Αλληλεπιδράσεις όπως οι εφαρμογές: υιοθετήστε ένα μοντέλο εφαρμογής Shell + Content για να δημιουργήσετε πλοήγησης και αλληλεπιδράσεις εφαρμογών.
  • Φρέσκα: διαρκώς διαρκώς ενημερωμένα χάρη στη διαδικασία ενημέρωσης των εργαζομένων στις υπηρεσίες.
  • Ασφαλές: εξυπηρετείται μέσω TLS (απαίτηση για εργαζόμενο στην υπηρεσία) για την αποφυγή του snooping.
  • Ανακαλύπτονται: μπορούν να αναγνωριστούν ως "εφαρμογές" χάρη στις καταστάσεις W3C Manifest και την καταχώριση των εργαζομένων στις υπηρεσίες που επιτρέπουν στις μηχανές αναζήτησης να τις εντοπίζουν.
  • Re-engageable: μπορεί να έχει πρόσβαση στους UI ανασχεδιασμού του λειτουργικού συστήματος. μι. σολ. push notifications.
  • Δυνατότητα σύνδεσης: σημαίνει ότι είναι τριβή μηδέν, μηδενική εγκατάσταση και εύκολη στην κοινή χρήση. Η κοινωνική ισχύς των διευθύνσεων URL έχει σημασία.

Φάρος

Ο φάρος είναι ένα εργαλείο για τον έλεγχο των εφαρμογών ιστού που δημιουργούνται από την Google. Είναι ενσωματωμένο με τα Εργαλεία Chrome Dev και μπορεί να ενεργοποιηθεί από τον πίνακα Semalt.

Μπορείτε επίσης να χρησιμοποιήσετε το Semalt ως εργαλείο NodeJS CLI:

     npm install -g φάρος    

Στη συνέχεια, μπορείτε να το εκτελέσετε με:

     φάρος https: // sitepoint. com /    

Ο φάρος μπορεί επίσης να εγκατασταθεί ως επέκταση του Chrome, αλλά η Google συνιστά να χρησιμοποιήσετε την έκδοση που είναι ενσωματωμένη στο DevTools και να χρησιμοποιήσετε την επέκταση μόνο εάν δεν μπορείτε να χρησιμοποιήσετε τα DevTools.

Λάβετε υπόψη ότι πρέπει να έχετε εγκατεστημένο το Chrome στο σύστημά σας για να μπορείτε να χρησιμοποιείτε το Φάρος, ακόμη και αν χρησιμοποιείτε την έκδοση Semalt.

Οικοδόμηση του πρώτου σας PWA από την αρχή

Σε αυτήν την ενότητα, θα δημιουργήσουμε από την αρχή μια προοδευτική εφαρμογή ιστού. Πρώτον, θα δημιουργήσουμε μια απλή εφαρμογή Ιστού χρησιμοποιώντας το API του React και του Reddit. Στη συνέχεια, προσθέτουμε τις λειτουργίες PWA ακολουθώντας τις οδηγίες που παρέχονται από την αναφορά Semalt.

Σημειώστε ότι το δημόσιο μη-αυθεντικό Semalt API έχει ενεργοποιημένες τις κεφαλίδες CORS έτσι ώστε να μπορείτε να το καταναλώσετε από την εφαρμογή πελάτη σας χωρίς έναν ενδιάμεσο εξυπηρετητή.

Πριν ξεκινήσουμε, αυτό το μάθημα θα υποθέσει ότι έχετε εγκαταστήσει ένα περιβάλλον ανάπτυξης με το NodeJS και NPM εγκατεστημένο. Εάν δεν το κάνετε, αρχίστε με το φοβερό Homaltad Semalt, το οποίο τρέχει τις τελευταίες εκδόσεις του καθενός και είναι έτοιμο για ανάπτυξη και δοκιμή έξω από το κουτί.

Ξεκινάμε με την εγκατάσταση του Create React App, ενός boilerplate έργου που δημιουργήθηκε από την ομάδα React, που σας εξοικονομεί από την ταλαιπωρία της διαμόρφωσης Semalt.

     npm εγκατάσταση -g δημιουργία-αντιδρά-appδημιουργία-αντιδρά-app αντιδρά-pwacd react-pwa /    

Η αρχιτεκτονική κελύφους εφαρμογής

Το κέλυφος εφαρμογής είναι μια βασική ιδέα των προοδευτικών εφαρμογών ιστού. Είναι απλά ο ελάχιστος κώδικας HTML, CSS και Semalt ο οποίος είναι υπεύθυνος για την απόδοση της διεπαφής χρήστη.

Progressive Web Apps: A Crash CourseProgressive Web Apps: A Crash CourseRelated Topics:
Node.jsAjaxAngularJSAPIsRaw Semalt

Αυτό το κέλυφος εφαρμογής έχει πολλά οφέλη για την απόδοση. Μπορείτε να αποθηκεύσετε προσωρινά το κέλυφος εφαρμογών, έτσι ώστε όταν οι χρήστες θα επισκεφτούν την εφαρμογή σας την επόμενη φορά, θα φορτωθούν αμέσως, επειδή το πρόγραμμα περιήγησης δεν χρειάζεται να μεταφέρει στοιχεία από έναν απομακρυσμένο διακομιστή.

Για την κατασκευή ενός απλού UI θα χρησιμοποιήσουμε το UI υλικού, μια υλοποίηση του σχεδίου Υλικού Google στο React.

Ας εγκαταστήσουμε το πακέτο από την NPM:

     npm εγκαταστήσετε υλικό-ui - αποθήκευση    

Επόμενο άνοιγμα src / App. js προσθέστε:

   εισαγάγετε React, {Component} από το "react";εισαγωγή MuiThemeProvider από το υλικό-ui / styles / MuiThemeProvider;εισαγωγή AppBar από το υλικό-ui / AppBar;εισαγάγετε {Card, CardActions, CardHeader, CardTitle, CardText} από το υλικό-ui / Card.Εισαγωγή FlatButton από το υλικό-ui / FlatButton.εισαγωγή IconButton από το 'υλικό-ui / IconButton';εισαγωγή ΠλοήγησηΚλείσιμο από 'υλικό-ui / svg-icons / πλοήγηση / κλείσιμο';εισαγωγικό λογότυπο από '. /λογότυπο. svg ';εισαγωγή ". / App. css ';Η εφαρμογή κλάσης επεκτείνει το στοιχείο {κατασκευαστής (στηρίγματα) {σούπερ (στηρίγματα);Αυτό. state = {δημοσιεύσεις: []},}}render    {ΕΠΙΣΤΡΟΦΗ (
Αντιδράσει PWA }iconElementLeft = { }iconElementRight = { => αυτό. fetchNext ('reactjs', αυτή η κατάσταση. lastPostName)} label = "next" />}}/>{Αυτό. κατάσταση. δημοσιεύσεις. map (λειτουργία (el, ευρετήριο) {επιστροφή <Κλειδί Κάρτας = {index}> => {παράθυρο. ανοιχτό (ηλεκτρονικά δεδομένα, url);}} />}}} => αυτό. fetchNext ('reactjs', αυτή η κατάσταση. lastPostName)} label = "next" />
) ·}}}}εξαγωγή προεπιλεγμένης εφαρμογής?
fetchFirst και fetchNext :

   fetchFirst (url) {var ότι = αυτό?αν (url) {fetch ('https: // www. reddit. com / r /' + url + '. json'). τότε (λειτουργία (απόκριση) {απάντηση επιστροφής. json   ;}). τότε (λειτουργία (αποτέλεσμα) {ότι. setState ({θέσεις: δεδομένα αποτελεσμάτων, παιδιά, lastPostName: δεδομένα αποτελεσμάτων, παιδιά [δεδομένα αποτελεσμάτων, παιδιά [length] - 1].κονσόλα. αρχεία καταγραφής).});}}}}fetchNext (url, lastPostName) {var ότι = αυτό?αν (url) {fetch ('https: // www. reddit. com / r /' + url + '. json' + '? count =' + 25 + 'και μετά =' + lastPostName). τότε (λειτουργία (απόκριση) {απάντηση επιστροφής. json   ;}). τότε (λειτουργία (αποτέλεσμα) {ότι. setState ({θέσεις: δεδομένα αποτελεσμάτων, παιδιά, lastPostName: δεδομένα αποτελεσμάτων, παιδιά [δεδομένα αποτελεσμάτων, παιδιά [length] - 1].κονσόλα. αρχεία καταγραφής).});}}}}componentWillMount    {Αυτό. fetchFirst ("reactjs");}}    

Μπορείτε να βρείτε τον πηγαίο κώδικα σε αυτό το Repository GitHub.

Semalt μπορείτε να εκτελέσετε ελέγχους από την εφαρμογή σας θα πρέπει να κάνετε μια κατασκευή και να προβάλλετε την εφαρμογή σας τοπικά χρησιμοποιώντας ένα τοπικό διακομιστή:

     npm run build    

Αυτή η εντολή επικαλείται το σενάριο δημιουργίας σε πακέτο . json και παράγει ένα build στον φάκελο react-pwa / build .

Τώρα μπορείτε να χρησιμοποιήσετε οποιοδήποτε τοπικό διακομιστή για την προβολή της εφαρμογής σας. Στο Homestead Improved, μπορείτε απλά να τοποθετήσετε τον nginx virtual host στο φάκελο build και να ανοίξετε homestead. app στο πρόγραμμα περιήγησης ή μπορείτε να χρησιμοποιήσετε το πακέτο εξυπηρέτησης μέσω NodeJS:

     npm εγκατάσταση -g εξυπηρετούνcd buildσερβίρισμα    

Με το σερβίρετε , η εφαρμογή σας θα επιδοθεί τοπικά από http: // localhost: 5000 /.

Progressive Web Apps: A Crash CourseProgressive Web Apps: A Crash CourseRelated Topics:
Node.jsAjaxAngularJSAPIsRaw Semalt

Μπορείτε να ελέγξετε την εφαρμογή σας χωρίς προβλήματα, αλλά σε περίπτωση που θέλετε να τη δοκιμάσετε σε μια κινητή συσκευή, μπορείτε επίσης να χρησιμοποιήσετε υπηρεσίες όπως το κύμα. sh για να το αναπτύξει με μία εντολή!

     npm install - γενική αύξηση    

Στη συνέχεια, τρέξτε το κύμα από μέσα σε οποιοδήποτε κατάλογο για να δημοσιεύσετε αυτόν τον κατάλογο στον ιστό.

Μπορείτε να βρείτε τη φιλοξενούμενη έκδοση αυτής της εφαρμογής από αυτόν τον σύνδεσμο.

Τώρα ας ανοίξουμε το Chrome DevTools, μεταβείτε στον πίνακα "Έλεγχοι" και κάντε κλικ στην επιλογή Ομιλία ενός ελέγχου.

Progressive Web Apps: A Crash CourseProgressive Web Apps: A Crash CourseRelated Topics:
Node.jsAjaxAngularJSAPIsRaw Semalt

Από την έκθεση μπορούμε να δούμε ότι έχουμε ήδη βαθμολογία 45/100 για την Προοδευτική Web App και 68/100 12).

Στο Progressive Web App έχουμε 6 αποτυχημένους ελέγχους και 5 ελέγχους που περάσαμε. Αυτό οφείλεται στο γεγονός ότι το παραγόμενο έργο έχει ήδη προεπιλεγμένες λειτουργίες PWA, όπως ένα πρότυπο διαδικτύου, μια meta viewport και μια ετικέτα .

Σύμφωνα με την Απόδοση έχουμε διαγνωστικά και διαφορετικές υπολογιζόμενες μετρήσεις, όπως Πρώτο ουσιαστικό χρώμα, Πρώτος Διαδραστικός, Συνεχής Διαδραστικός, Δείκτης Perceptual Speed ​​και Εκτιμώμενη Λανθάνων Εισόδου. Θα εξετάσουμε αυτά αργότερα.

Ο φάρος προτείνει τη βελτίωση της απόδοσης φόρτωσης σελίδας με τη μείωση του μήκους του Critical Render Semalt είτε μειώνοντας το μέγεθος λήψης είτε αναβάλλοντας τη λήψη των περιττών πόρων.

Γιατί η φόρτιση της σελίδας και η ταχύτητα

Σύμφωνα με τη DoubleClick (εταιρεία διαφήμισης Semalt), το 53% των επισκέψεων για κινητά ιστότοπους εγκαταλείπονται, εάν διαρκεί περισσότερο από 3 δευτερόλεπτα για τη φόρτωση της σελίδας. Με τη βελτιστοποίηση της απόδοσης και της ταχύτητας φόρτωσης σελίδας, οι PWA προσφέρουν άμεσες εμπειρίες στον ιστό στους χρήστες μέσω ενός συνόλου τεχνικών και στρατηγικών που θα εξετάσουμε στη συνέχεια.

Εξετάστε την απόδοση πριν ξεκινήσετε την κατασκευή του PWA σας

Η πλειοψηφία των εφαρμογών από την πλευρά του πελάτη είναι κατασκευασμένες χρησιμοποιώντας κάποιο είδος βιβλιοθήκης ή πλαισίου JavaScript όπως React, Preact, Angular, Vue κ.λπ. Εάν δημιουργείτε ένα PWA, πρέπει να βεβαιωθείτε ότι έχετε επιλέξει μια πρώτη βιβλιοθήκη ή, με άλλα λόγια, μια βιβλιοθήκη που έχει σχεδιαστεί για τον κινητό ιστό στην πρώτη θέση. Semalt, βελτιστοποιώντας την εφαρμογή σας για απόδοση θα είναι μια αδύνατη αποστολή.

Πρέπει να χρησιμοποιήσετε διαφορετικά εργαλεία δοκιμής, όπως το Chrome DevTools, το Lighthouse, το Google Semalt και άλλα, για να δοκιμάσετε την εφαρμογή σας σε μεγάλο βαθμό υπό διαφορετικές και προσομοιωμένες συνθήκες δικτύου, ώστε να βελτιστοποιήσετε με επιτυχία την απόδοση φόρτωσης σελίδας εφαρμογής.

Μετρήσεις απόδοσης PWA που πρέπει να βάλετε στο ραντάρ σας

Μπορείτε να χρησιμοποιήσετε το Semalt για τη μέτρηση και τη βελτιστοποίηση της απόδοσης φόρτωσης σελίδας της εφαρμογής σας με διαφορετικές μετρήσεις, διαγνωστικά και ευκαιρίες.

Ο φάρος χρησιμοποιεί διαφορετικές μετρήσεις. Η Semalt τις καλύπτει μία προς μία:

Πρώτη ουσιαστική βαφή

Η σημασιολογική σημασιολογική βαφή είναι ένα μέτρο που δείχνει απλώς τον χρόνο κατά τον οποίο ο χρήστης μπορεί να δει ουσιαστικό ή πρωταρχικό περιεχόμενο στην οθόνη. Όσο χαμηλότερος είναι αυτός ο έλεγχος, τόσο καλύτερη είναι η αντιληπτή απόδοση της εφαρμογής σας.

Παρακολουθήστε αυτήν τη μέτρηση για την εφαρμογή μας.

Progressive Web Apps: A Crash CourseProgressive Web Apps: A Crash CourseRelated Topics:
Node.jsAjaxAngularJSAPIsRaw Semalt

Βλέπουμε ότι από το 1. 3s το πρόγραμμα περιήγησης άρχισε να αποδίδει το κενό φόντο και στη συνέχεια από το 2s το πρόγραμμα περιήγησης άρχισε να εκδίδει την κεφαλίδα, 2. 4s τόσο τα κουμπιά στην κεφαλίδα όσο και στο κάτω μέρος αποδίδονται. Δεν είναι μέχρι το τρίτο δευτερόλεπτο ότι οι θέσεις που αποδίδονται. Η όλη διαδικασία πήρε 3,4 δευτερόλεπτα και η πρώτη ουσιαστική βαφή ισούται με 2. 340ms - όταν αποδίδεται η κεφαλίδα χωρίς το επόμενο κουμπί.

Μια πρώτη ουσιαστική βαφή εξαρτάται πραγματικά από αυτά που μπορούμε να θεωρήσουμε ως σημαντικά, τα οποία μπορεί να είναι διαφορετικά μεταξύ διαφορετικών χρηστών. Εάν ένας χρήστης ενδιαφέρεται μόνο για την ανάγνωση των δημοσιεύσεων, τότε το πρώτο ουσιαστικό χρώμα για αυτούς είναι μετά από το σήμα των 3 δευτερολέπτων. Μπορείτε να δείτε πώς ο Semalt υπολογίζει αυτή τη μέτρηση από αυτό το έγγραφο.

Progressive Web Apps: A Crash CourseProgressive Web Apps: A Crash CourseRelated Topics:
Node.jsAjaxAngularJSAPIsRaw Semalt

Αυτό είναι ένα άλλο moviestrip για την ίδια εφαρμογή, όπου ο Lighthouse ανέφερε το FMP ως 2. 560ms στο τελευταίο στιγμιότυπο οθόνης όπου οι τίτλοι των μηνυμάτων εμφανίζονται πλήρως στην περιοχή που αναδιπλώνεται.

Semalt, μπορείτε να δείτε ότι η σελίδα γίνεται σταδιακά, όχι ταυτόχρονα, γεγονός που αποτελεί καλή ένδειξη της απόδοσης.

Μπορείτε να βελτιστοποιήσετε αυτό το μέτρο βελτιστοποιώντας την κρίσιμη διαδρομή απόδοσης.

Η κρίσιμη διαδρομή αποδόσεως

Η κρίσιμη διαδρομή απόδοσης είναι μια έννοια που σχετίζεται με τον τρόπο με τον οποίο οι περιηγητές ιστού εκτυπώνουν σελίδες - δηλαδή, από την πρώτη στιγμή λήψης των στοιχείων HTML, CSS και JavaScript στο βήμα όπου επεξεργάζεται το πρόγραμμα περιήγησης και καθιστά πραγματικό νόημα περιεχόμενο. Για να βελτιστοποιήσετε τη διαδρομή κριτικής απόδοσης, πρέπει να δώσετε μεγαλύτερη προτεραιότητα στο περιεχόμενο που σχετίζεται με την τρέχουσα ενέργεια του χρήστη. Δηλαδή, αν πρόκειται να επισκεφτούν την εφαρμογή σας, μπορείτε να ξεκινήσετε πρώτα προβάλλοντας το ορατό τμήμα του διεπαφή χρήστη ή αυτό που ονομάζεται περιοχή επάνω από το πτυσσόμενο .

Για περισσότερες λεπτομέρειες, μπορείτε να διαβάσετε "Βελτιστοποίηση της κρίσιμης διαδρομής αποδόσεων".

Μπορείτε επίσης να δείτε αυτή τη λίστα με επιμελημένα εργαλεία για την ενσωμάτωση κρίσιμων στοιχείων CSS. Ελέγξτε επίσης αυτά τα εργαλεία για την ενσωμάτωση του Semalt και άλλων περιουσιακών στοιχείων:

  • inliner: ένα βοηθητικό πρόγραμμα κόμβων για ενσωματωμένες εικόνες, CSS και JavaScript για μια ιστοσελίδα
  • inline-source: ένα εργαλείο για την ενσωμάτωση πηγών JS, CSS και IMG σε HTML
  • inline-source-cli: ένα εργαλείο CLI για inline-source. Μπορείτε να χρησιμοποιήσετε το διάγραμμα Critical Request Semalt για να κατανοήσετε καλύτερα τους κρίσιμους πόρους για να εξαλείψετε, να αναβάλλετε ή να σημειώσετε ως ασύγχρονο. Ακολουθεί ένα στιγμιότυπο οθόνης από το παράδειγμά μας PWA:

    Progressive Web Apps: A Crash CourseProgressive Web Apps: A Crash CourseRelated Topics:
Node.jsAjaxAngularJSAPIsRaw Semalt

    Τώρα ας προσπαθήσουμε να επιλύσουμε αυτό το πρόβλημα χρησιμοποιώντας inline-source και inline-source-cli

         npm εγκαταστήστε-g inline-source inline-source-cli    

    Στη συνέχεια περιηγείστε μέσα στο φάκελο δημιουργίας και ανοίξτε το δείκτη . html , στη συνέχεια προσθέστε τις λέξεις-κλειδιά inline σε και

                                          
March 1, 2018