Comment utiliser pjax pour l'accélération des pages dans les applications Laravel

Remarque : PHPHub utilise pjax pour accélérer le chargement des pages Web. Cet article est une note rédigée après le développement de cette fonctionnalité

Recommandations associées : "Tutoriel Laravel"

Qu'est-ce que Pjax

        .--.
       /    \
      ## a  a
      (   '._)
       |'-- |
     _.\___/_   ___pjax___
   ."\> \Y/|<&#39;.  &#39;._.-&#39;
  /  \ \_\/ /  &#39;-&#39; /
  | --&#39;\_/|/ |   _/
  |___.-&#39; |  |`&#39;`
    |     |  |
    |    / &#39;./
   /__./` | |
      \   | |
       \  | |
       ;  | |
       /  | |
 jgs  |___\_.\_
      `-"--&#39;---&#39;

L'adresse du projet est ici, l'introduction officielle :

pushState + ajax = pjax

Veuillez consulter le détail explication Zhihu à propos de ce problème, ou vérifiez vous-même les informations

Pour le décrire simplement, il s'agit d'utiliser la technologie ajax pour récupérer le document du serveur, mettre à jour la page actuelle sans actualiser la page du navigateur, et il peut s'assurer que les fichiers js et css de la page ne seront pas chargés à plusieurs reprises, puis utiliser la fonction assets fournie par le navigateur pour mettre à jour l'URL et garantir que l'utilisateur peut revenir au page historique en cliquant sur le bouton de retour. pushState

Remarque : Tous les navigateurs ne prennent pas en charge pushState. Veuillez consulter ici pour connaître la compatibilité du navigateur. Lorsque le navigateur est incompatible, la méthode de navigation d'origine sera. automatiquement utilisé. Pour y accéder.

les fichiers n'ont pas besoin d'être rechargés, ce qui améliore grandement la vitesse de chargement de la page .assets

rcrowe/Turbo

#rcrowe/Turbo

composer.json Ajouter sous les propriétés : require

"rcrowe/turbo": "0.2.*"

ou composer updatecomposer install

#Providers

, dans les options app/config/app.php tableau Ajoutez : providers

"Turbo\Provider\Laravel\TurboServiceProvider",

publicjs

wget https://raw.github.com/defunkt/jquery-pjax/master/jquery.pjax.js

<script src="{{ cdn(&#39;js/jquery.pjax.js&#39;) }}"></script>

$(document).ready(function(){    $(document).pjax('a', 'body');});

Si le navigateur actuel prend en charge a, envoyez une requête ajax et apportez le. paramètre pjax ._pjax=body

#nprogress

et nprogress.js à la page : nprogress.css

    <script src=&#39;nprogress.js&#39;></script>    <link rel=&#39;stylesheet&#39; href=&#39;nprogress.css&#39;/>

$(document).ready(function(){    $(document).pjax('a', 'body');    $(document).on('pjax:start', function() {
      NProgress.start();  });  $(document).on('pjax:end', function() {
      NProgress.done();
      self.siteBootUp();  });});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!