Vue2.x学习笔记

# 四.性能优化（ssr）

前言

vue 项目服务端渲染的场景，以及工具的选型与用法

# 1.服务端渲染

概念：放在浏览器进行渲染就是浏览器渲染,放在服务器进行渲染就是服务器渲染

  • 客户端渲染不利于 SEO 搜索引擎优化
  • 服务端渲染是可以被爬虫抓取到的，客户端异步渲染是很难被爬虫抓取到的
  • SSR 直接将 HTML 字符串传递给浏览器。大大加快了首屏加载时间
  • SSR 占用更多的 CPU 和内存资源
  • 一些常用的浏览器 API 可能无法正常使用
  • 在 vue 中只支持 beforeCreate 和 created 两个生命周期
  • Nuxt.js 是使用 Webpack 和 Node.js 进行封装的基于 Vue 的 SSR 框架

# 2.案例

  • package.json
{
  "name": "ssr",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.3",
    "vue": "^2.5.17",
    "vue-server-renderer": "^2.5.17"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  • index.js
//第一步：创建一个vue实列
const Vue = require("vue");
const app = new Vue({
  template: `<div>Hello World</div>`,
});

const renderer = require("vue-server-renderer").createRenderer({
  template: require("fs").readFileSync(`./index.html`, "utf-8"),
});

renderer.renderToString(app, (err, html) => {
  console.log(html); //html 将是注入应用程序内容的完整页面
});
// 第二步：创建一个 renderer
const renderer = require("vue-server-renderer").createRenderer();

// 第三步：将vue 实列渲染为html
renderer.renderToString(app, (err, html) => {
  if (err) throw err;
  console.log(html);
});

// 在2.5.0+ 如果没有传入回调函数，则返回Promise
renderer
  .renderToString(app)
  .then(html => {
    console.log(html);
  })
  .catch(err => {
    console.log(err);
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
  • index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <title>hello</title>
</head>

<body>
    <!--vue-ssr-outlet-->
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
  • express.js
const Vue = require("vue");
const server = require("express")();
const renderer = require("vue-server-renderer").createRenderer();

server.get("*", (req, res) => {
  const app = new Vue({
    data: {
      url: req.url,
    },
    template: `<div>访问的 url 是：{{ url }}</div>`,
  });
  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end("Internal Server Error");
      return;
    }
    res.end(`
        <!DOCTYPE html>
        <html lang="en">
            <head><meta charset="UTF-8"><title>Hello</title></head>
            <body>${html}</body>
        </html>
    `);
  });
});

server.listen(8080);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

← 四.性能优化（pwa） →