Application vue.js pré-rendue dans les projets node et laravel-Voir.js-php.cn

Application vue.js pré-rendue dans les projets node et laravel

Le rendu côté serveur est très populaire en ce moment. Mais ce n’est pas sans défauts. Le pré-rendu est une alternative et peut même être meilleur dans certains cas. Voyons comment pré-afficher une application vue.js.

Dans cet article, nous explorerons le fonctionnement du prérendu avec vue.js et examinerons deux exemples : l'un est un projet node.js et l'autre est un projet laravel.

Tutoriels associés recommandés : tutoriel node js, tutoriel vue.js, tutoriel laravel

1. Rendu côté serveur

Un inconvénient des applications basées sur JavaScript est que la page que le navigateur reçoit du serveur est fondamentalement vide. Le DOM ne peut pas être construit tant que le Javascript n'est pas téléchargé et exécuté.

Cela signifie que les utilisateurs doivent attendre plus longtemps avant de voir quoi que ce soit. Cela peut également avoir un impact sur le référencement si les robots ne peuvent pas afficher rapidement le contenu de la page.

Server Side Rendering (SSR) surmonte ce problème en rendant l'application sur le serveur afin que le client reçoive l'intégralité du contenu DOM lorsque la page est chargée (avant même l'exécution du Javascript).

Au lieu de cela, le navigateur reçoit ceci du serveur :

<head> ... </head>
<body>
<div id="app">
  <!--This is empty, Javascript will populate it later-->
</app>
</body>

Copier après la connexion

En utilisant SSR, il reçoit une page de contenu complet :

<head> ... </head>
<body>
<div id="app">
  <div class="container">
    <h1>Your Server-Side Rendered App</h1>
    <div class="component-1">
      <p>Hello World</p>
      <!--etc etc. This was all rendered on the server-->
</app>
</body>

Copier après la connexion

Inconvénients du rendu côté serveur

Votre application doit être exécutable sur le serveur, vous devez donc concevoir votre code pour qu'il soit "universel", c'est-à-dire qu'il puisse être parcouru. Fonctionne sur le serveur et les serveurs de nœuds.
Votre application s'exécutera à chaque requête adressée au serveur, ajoutant une charge traditionnelle et des réponses lentes. La mise en cache peut partiellement atténuer cette situation.
Vous ne pouvez faire du SSR qu'avec Node.js. Si votre backend principal est Laravel, Django, etc., vous devez exécuter un serveur de nœuds sur le backend principal pour gérer SSR.

2. Pré-rendu

Il y en a un autre Une façon de résoudre le problème des pages vides : le pré-rendu. En utilisant cette approche, vous exécutez l'application avant de la déployer, capturez la sortie de la page et remplacez le fichier HTML par la sortie capturée.

C'est fondamentalement le même concept que SSR, sauf qu'il est pré-déployé dans un environnement de développement au lieu d'un serveur live.

Le pré-rendu est généralement effectué à l'aide d'un navigateur sans tête comme PhantomJS et peut être intégré au flux de construction avec Webpack, Gulp, etc.

Avantages du pré-rendu

Aucune charge de serveur supplémentaire donc Plus rapide et moins cher que SSR
Configuration de production plus facile et code d'application plus simple, donc moins sujet aux erreurs
Aucun serveur de production Node.js requis

Inconvénients du pré-rendu

Pas adapté aux pages qui affichent des données changeantes (telles que des tableaux).
ne s'applique pas aux pages avec un contenu utilisateur spécifique, telles que les pages de compte contenant les informations personnelles de l'utilisateur. Cependant, ces types de pages ne sont pas si importants à pré-afficher de toute façon ; ce sont nos pages principales, fréquemment utilisées, que nous souhaitons servir rapidement.
Vous devez pré-restituer chaque itinéraire individuellement dans votre application.

Tableau comparatif

	仅客户端渲染	服务端渲染	预渲染
生产服务器	Any/none	Node.js only	Any/none
额外的服务器负载	No	Yes	No
个性化用户数据？	N/A	Yes	No

三、Vue.js预渲染示例

让我们做一个简单的例子来预渲染一个vue.js应用程序，一次在node.js环境中，一次在laravel环境中。

在这些示例中，我们将使用webpack和pre render spa插件来执行预渲染。

1、Vue和Node

第1步：项目安装

我们将使用vue-cli和webpack-simple模板。

$ vue init webpack-simple vue-node-pr-test
$ cd vue-node-pr-test
$ npm install

Copier après la connexion

我们还需要另外三个模块，后面还有解释。

$ npm install --save-dev http-server html-webpack-plugin prerender-spa-plugin

Copier après la connexion

第2步：在Webpack构建中包含index.html

Webpack -simple模板在Webpack构建输出中不包含index.html文件。然而，当我们预渲染应用程序时，我们需要覆盖我们的索引。因此，让我们将它添加到输出中，以免破坏原始的。

在我们的Webpack .config.js文件中使用html-webpack-plugin将文件包含在Webpack构建中:

var HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;);

module.exports.plugins.push(
  new HtmlWebpackPlugin({
    template: &#39;./index.html&#39;,
    inject: false
  }),
);

Copier après la connexion

现在我们改变了我们的Webpack公共路径，因为index.html现在和其他静态资产在同一个文件夹中:

output: {
  path: path.resolve(__dirname, &#39;./dist&#39;),
  filename: &#39;build.js&#39;,
  publicPath: &#39;/&#39;, // was originally &#39;dist&#39;
},

Copier après la connexion

由于路径的变化，我们还需要将index.html中的更改为。

第3步：测试Webpack生成版本

现在我们建造:

$ npm run build

Copier après la connexion

我们的dist文件夹应该是这样的:

- dist
-- build.js
-- index.html
-- logo.png

Copier après la connexion

如果我们检查dist/index.html，它会是这样的:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vue-node-pr-test</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="/build.js"></script>
  </body>
</html>

Copier après la connexion

现在我们可以使用http-server并从dist文件夹中提供应用程序。默认情况下，它将运行在localhost:8080:

$ ./node_modules/.bin/http-server ./dist

Copier après la connexion

第4步：预渲染应用程序

现在我们的index.html文件在Webpack构建中，我们可以使用预呈现的HTML更新它。

首先，我们需要在webpack配置中添加prerender-spa-plugin。确保它在html-webpack-plugin之后。

var PrerenderSpaPlugin = require(&#39;prerender-spa-plugin&#39;);

module.exports.plugins.push(
  new PrerenderSpaPlugin(
    path.join(__dirname, &#39;./dist&#39;),
    [ &#39;/&#39; ]
  )
);

Copier après la connexion

PrerenderSpaPlugin的第一个参数是index.html文件的位置，第二个参数是应用程序中的路由列表。在这个例子中，我们只有一条路径。

现在我们再次建造：

$ npm run build

Copier après la connexion

我们的构建将比以前花费更长的时间，因为预渲染插件正在做的事情:

它创建一个Phantom JS实例并运行应用程序
获取DOM的快照
将快照输出到生成文件夹中的HTML文件

它会对每条路径重复这个过程，所以如果你有很多页面，构建应用程序可能需要相当长的时间。

在建立后，我们的dist/index.html现在应该包括所有预渲染的HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>prerender-test</title>
  <style type="text/css">#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px
  }

  h1, h2 {
    font-weight: 400
  }

  ul {
    list-style-type: none;
    padding: 0
  }

  li {
    display: inline-block;
    margin: 0 10px
  }

  a {
    color: #42b983
  }</style>
</head>
<body>
<div id="app"><img src="/logo.png?82b9c7a5a3f405032b1db71a25f67021">
  <h1></h1>
  <h2>Essential Links</h2>
  <ul>
    <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
    <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
    <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
    <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
  </ul>
  <h2>Ecosystem</h2>
  <ul>
    <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
    <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
    <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
    <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
  </ul>
</div>
<script type="text/javascript" src="/build.js"></script>

</body>
</html>

Copier après la connexion

2、Vue 和 Laravel

如果您跳过了Vue和Node示例，我建议您先回去阅读它，因为它包含了对任何常见步骤的更全面的解释。

第1步：项目安装

首先，我们将设置一个新的Laravel项目。

$ laravel new vue-laravel-pr-test
$ cd vue-laravel-pr-test
$ npm install

Copier après la connexion

我们还将增加两个我们需要的NPM模块:

$ npm install --save-dev html-webpack-plugin prerender-spa-plugin

Copier après la connexion

第2步:提供一个普通的HTML文件

默认情况下，Laravel在根URL处提供Blade模板文件。为了使示例简单，我们将使用我们将在resources / views / index.html创建的以下纯HTML文件替换它

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Laravel</title>
    <link rel="stylesheet" href="/css/app.css">
<body>
<div id="app">
  <example></example>
</div>
<script type="text/javascript" src="/js/app.js"></script>
</body>
</html>

Copier après la connexion

现在，我们需要在根路径上提供该文件，而不是刀片服务器模板。将route /web.php更改为:

Route::get(&#39;/&#39;, function () {
  return File::get(public_path() . &#39;/index.html&#39;);
});

Copier après la connexion

这实际上指向我们的build文件夹，我们很快就会生成它。

第3步：将HTML文件添加到构建中

像在节点示例中一样，我们希望在Webpack构建中包含index.html，以便稍后使用预呈现的HTML覆盖它。

我们需要做一些Webpack配置。在本例中，我使用的是Laravel 5.4，它使用的是Laravel Mix。Mix没有提供本地webpack配置文件，因为它使用自己的默认文件，所以让我们从laravel-mix模块复制一个配置文件:

$ cp ./node_modules/laravel-mix/setup/webpack.config.js .

Copier après la connexion

我们还需要让我们的NPM生产脚本指向这个配置文件，因此编辑包。json，并将生产脚本更改为:

cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js 
--progress --hide-modules --config=webpack.config.js

Copier après la connexion

现在我们将html-webpack-plugin添加到webpack.config.js文件中。把这个添加到文件的底部上面的混合定型部分:

var HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;);

module.exports.plugins.push(
  new HtmlWebpackPlugin({
    template: Mix.Paths.root(&#39;resources/views/index.html&#39;),
    inject: false
  });
);

Copier après la connexion

第4步：测试Weback生成版本

现在让我们为生产和服务:

$ npm run production
$ php artisan serve

Copier après la connexion

不过，在运行应用程序时，浏览器中可能会出现错误，因为我们从未为window.Laravel.csrfToken设置值。对于这个简单的例子，注释掉会更快，所以像这样修改resources/assets/js/bootsta .js:

window.axios.defaults.headers.common = {
  &#39;X-Requested-With&#39;: &#39;XMLHttpRequest&#39;
  // &#39;X-CSRF-TOKEN&#39;: window.Laravel.csrfToken;
};

Copier après la connexion

第5步：预渲染应用程序

我们现在需要在webpack配置中使用prerender spa插件来执行预渲染。确保它在HTML网页包插件之后。

var PrerenderSpaPlugin = require(&#39;prerender-spa-plugin&#39;);

module.exports.plugins.push(
  new PrerenderSpaPlugin(
    Mix.output().path,
    [ &#39;/&#39; ]
  )
);

Copier après la connexion

现在我们可以做一个生产构建:

$ npm run production

Copier après la connexion

如果您选中build文件夹，dist/index.html现在应该如下所示，并使用预渲染HTML完成:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Laravel</title>
    <link rel="stylesheet" href="/css/app.css">
</head>
<body>
<div id="app">
    <div>
        <div>
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div>Example Component</div>
                    <div>
                        I&#39;m an example component!
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/js/app.js"></script>
</body>
</html>

Copier après la connexion