前端關於seo的我的理解與優化（基於Vue ssr）

時間  2020-04-09
標籤 前端 關於 seo 我的 理解 優化 基於 vue ssr 欄目 網站開發 简体版
原文   原文鏈接

什麼是seo

Search Engine Optimization，搜索引擎優化，這就是seo。（固然不止這些）。可是在這裏就是很少說了。javascript

SEO原理

其實搜索引擎作的工做是至關複雜的，咱們這裏簡單說一下大體的過程。後續針對SEO如何優化，也會根據這幾個點展開描述。css

  1. 頁面抓取： 蜘蛛向服務器請求頁面，獲取頁面內容
  2. 分析入庫：對獲取到的內容進行分析，對優質頁面進行收錄
  3. 檢索排序：當用戶檢索關鍵詞時，從收錄的頁面中按照必定的規則進行排序，並返回給用戶結果

爲何要作seo優化

固然是爲了「蜘蛛」能夠網到你的內容，這樣你的內容才能讓更多人知道。固然不是全部網站系統都須要作這個，你像一個公司oa系統，就沒有必要去作這個，你就本身用，爲何要給別人知道。不過，你若是是賣oa系統的，你能夠簡簡單單作一個預渲染就能夠，而後裏面配置路由的時候只配置首頁路由。html

像新聞網站，網購網站這些須要廣告流量的系統才須要這些。vue

Vue預渲染

預渲染用起來其實就是插件的使用 很簡單java

須要用到的插件

prerender-spa-pluginnode

puppeteerwebpack

webpack配置ios

new PrerenderSPAPlugin({
            staticDir: path.join(__dirname, '../dist'),
            //須要進行渲染的的頁面路由
            routes: ['/', '/aaa'],
            renderer: new Renderer({
                // 觸發渲染的時間，用於獲取數據後再保存渲染結果
                renderAfterTime: 10000,
                // 是否打開瀏覽器，false 是打開。可用於 debug 檢查渲染結果
                headless: false,
                // 在項目的main.js入口中使用 `document.dispatchEvent(new Event('render-event'))` 
                renderAfterDocumentEvent: 'render-event', // render-event: 聲明的方法名 
            })
        })
        })
複製代碼

main.js配置git

new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>',
    render: h => h(App),
    mounted() {
        document.dispatchEvent(new Event('render-event'))
    },
})
複製代碼

預渲染是最簡單的方案，可是隻適用於你頁面比較少（路由比較少）的時候，由於當你的頁面多了起來，你會發現預渲染會變得緩慢起來。github

vue-ssr 服務端渲染（官方）

約束

  1. 注意服務端只調用beforeCreat與created兩個鉤子，因此不能夠作相似於在created初始化一個定時器，而後在mounted或者destroyed銷燬這個定時器，否則服務器會慢慢的被這些定時器給榨乾了（這個是什麼意思呢？就是，我在node環境下去跑，他會去執行頁面內這兩個方法，具體以下圖）
  2. 因單線程的機制，在服務器端渲染時，過程當中有相似於單例的操做，那麼全部的請求都會共享這個單例的操做，因此應該使用工廠函數來確保每一個請求之間的獨立性。
  3. 若有在beforeCreat與created鉤子中使用第三方的API，須要確保該類API在node端運行時不會出現錯誤，好比在created鉤子中初始化一個數據請求的操做，這是正常而且及其合理的作法。但若是隻單純的使用XHR去操做，那在node端渲染時就出現問題了，因此應該採起axios這種瀏覽器端與服務器端都支持的第三方庫。
  4. 最重要一點: 切勿在通用代碼中使用document這種只在瀏覽器端能夠運行的API，反過來也不可使用只在node端能夠運行的API。（vue的refs好像是能夠獲取到，網上說能夠經過webpack變量來設置，下面會提到我使用的方法）

準備工做（這裏以最基礎的vue+webpack項目爲例）

初始化項目

vue init webpack vue-ssr-demo
cd vue-ssr-demo
npm install
npm run dev
複製代碼

首先得看看項目能不能啓動才能繼續下去對吧，要是這裏出錯的話，那直接掘金搜索vue+webpack怎麼初始化項目，應該挺多的

package.json

這裏只是貼出來給你們看的

開始

安裝依賴和啓動項目

npm i -D vue-server-renderer
複製代碼

vue-server-renderer 與 vue 版本須要保持一致匹配

增長一個測試頁面

<template>
  <div>
    Just a test page.
    <div>
      <router-link to="/">Home</router-link>
    </div>
    <div><h2>{{mode}}</h2></div>
    <div><span>{{count}}</span></div>
    <div><button @click="count++">+1</button></div>
  </div>
</template>
<script> export default { data () { return { mode: process.env.VUE_ENV === 'server' ? 'server' : 'client', count: 2 } } } </script>
複製代碼

src下的兩個新的js文件

在src目錄下建立兩個js

src
├── entry-client.js # 僅運行於瀏覽器
└── entry-server.js # 僅運行於服務器
複製代碼

entry.client.js

import { createApp } from './main'
const { app, router } = createApp()
// 由於可能存在異步組件，因此等待router將全部異步組件加載完畢，服務器端配置也須要此操做
router.onReady(() => {
  app.$mount('#app')
})
複製代碼

entry.server.js

// entry-server.js
import { createApp } from './main'
export default context => {
  // 由於有可能會是異步路由鉤子函數或組件，因此咱們將返回一個 Promise，
  // 以便服務器可以等待全部的內容在渲染前，
  // 就已經準備就緒。
  return new Promise((resolve, reject) => {
    const { app, router } = createApp()
    // 設置服務器端 router 的位置
    router.push(context.url)
    // 等到 router 將可能的異步組件和鉤子函數解析完
    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents()
      // 匹配不到的路由，執行 reject 函數，並返回 404
      if (!matchedComponents.length) {
        // eslint-disable-next-line
        return reject({ code: 404 })
      }
      // Promise 應該 resolve 應用程序實例，以便它能夠渲染
      resolve(app)
    }, reject)
  })
}
複製代碼

修改路由配置

爲了不產生單例的影響，這裏主要只爲每個請求都導出一個新的router實例:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
 
Vue.use(Router)
 
export function createRouter () {
  return new Router({
    mode: 'history', // 注意這裏也是爲history模式
    routes: [
      {
        path: '/',
        name: 'Hello',
        component: HelloWorld
      }, {
        path: '/test',
        name: 'Test',
        component: () => import('@/components/Test') // 異步組件
      }
    ]
  })
}
複製代碼

修改main.js

import Vue from 'vue'
import App from './App'
import { createRouter } from './router'
 
export function createApp () {
  // 建立 router 實例
  const router = new createRouter()
  const app = new Vue({
    // 注入 router 到根 Vue 實例
    router,
    render: h => h(App)
  })
  // 返回 app 和 router
  return { app, router }
}
複製代碼

webpack配置修改

vue-cli初始化的配置文件也有三個：base、dev、prod ，咱們依然保留這三個配置文件，只須要增長webpack.server.conf.js便可。

build
├── webpack.base.conf.js    # 基礎通用配置
├── webpack.client.conf.js  # 客戶端打包配置
└── webpack.server.conf.js  # 服務器端打包配置
複製代碼

webpack.prod.conf.js配置（客戶端配置）

修改webpack.base.conf.js的entry入口配置爲: ./src/entry-client.js。這樣原 dev 配置與 prod 配置都不會受到影響。

服務器端的配置也會引用base配置，但會將entry經過merge覆蓋爲 server-entry.js。 生成客戶端構建清單client manifest

優勢：

  1. 在生成的文件名中有哈希時，能夠取代 html-webpack-plugin 來注入正確的資源 URL。
  2. 在經過 webpack 的按需代碼分割特性渲染 bundle 時，咱們能夠確保對 chunk 進行最優化的資源預加載/數據預取，而且還能夠將所需的異步chunk智能地注入爲script標籤,以免客戶端的瀑布式請求(waterfall request)，以及改善可交互時間(TTI - time-to-interactive)。

其實很簡單，在prod配置中引入一個插件，並配置到plugin中便可:

const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
    // ...
    // ...
    plugins: [
      new webpack.DefinePlugin({
        'process.env': env,
        'process.env.VUE_ENV': '"client"' // 增長process.env.VUE_ENV
      }),
      //...
      // 另外須要將 prod 的HtmlWebpackPlugin 去除，由於咱們有了vue-ssr-client-manifest.json以後，服務器端會幫咱們作好這個工做。
      // new HtmlWebpackPlugin({
      // filename: config.build.index,
      // template: 'index.html',
      // inject: true,
      // minify: {
      // removeComments: true,
      // collapseWhitespace: true,
      // removeAttributeQuotes: true
      // // more options:
      // // https://github.com/kangax/html-minifier#options-quick-reference
      // },
      // // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      // chunksSortMode: 'dependency'
      // }),
 
      // 此插件在輸出目錄中
      // 生成 `vue-ssr-client-manifest.json`。
      new VueSSRClientPlugin()
    ]
// ...
複製代碼

webpack.server.conf.js(服務器端的配置)

server的配置有用到新插件運行安裝: npm i -D webpack-node-externals

const webpack = require('webpack')
const merge = require('webpack-merge')
const nodeExternals = require('webpack-node-externals')
const baseConfig = require('./webpack.base.conf.js')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
// 去除打包css的配置
baseConfig.module.rules[1].options = ''
//baseConfig.module.rules[1].options = '' // 去除分離css打包的插件（有安裝並使用esline的狀況）
//baseConfig.module.rules[0].options = '' // 去除分離css打包的插件（沒有安裝esline的狀況）
 
module.exports = merge(baseConfig, {
  // 將 entry 指向應用程序的 server entry 文件
  entry: './src/entry-server.js',
  // 這容許 webpack 以 Node 適用方式(Node-appropriate fashion)處理動態導入(dynamic import)，
  // 而且還會在編譯 Vue 組件時，
  // 告知 `vue-loader` 輸送面向服務器代碼(server-oriented code)。
  target: 'node',
  // 對 bundle renderer 提供 source map 支持
  devtool: 'source-map',
  // 此處告知 server bundle 使用 Node 風格導出模塊(Node-style exports)
  output: {
    libraryTarget: 'commonjs2'
  },
  // https://webpack.js.org/configuration/externals/#function
  // https://github.com/liady/webpack-node-externals
  // 外置化應用程序依賴模塊。可使服務器構建速度更快，
  // 並生成較小的 bundle 文件。
  externals: nodeExternals({
    // 不要外置化 webpack 須要處理的依賴模塊。
    // 你能夠在這裏添加更多的文件類型。例如，未處理 *.vue 原始文件，
    // 你還應該將修改 `global`（例如 polyfill）的依賴模塊列入白名單
    whitelist: /\.css$/
  }),
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
      'process.env.VUE_ENV': '"server"'
    }),
    // 這是將服務器的整個輸出
    // 構建爲單個 JSON 文件的插件。
    // 默認文件名爲 `vue-ssr-server-bundle.json`
    new VueSSRServerPlugin()
  ]
})
複製代碼

修改打包命令

若是出現cross-env找不到，請安裝npm i -D cross-env

"scripts": {
    //...
    "build:client": "node build/build.js",
    "build:server": "cross-env NODE_ENV=production webpack --config build/webpack.server.conf.js --progress --hide-modules",
    "build": "rimraf dist && npm run build:client && npm run build:server"
}
複製代碼

修改index.html

原來的<div id="app">刪掉，只在 body 中保留一個標記便可:<!--vue-ssr-outlet-->。 服務器端會在這個標記的位置自動生成一個<div id="app" data-server-rendered="true">，客戶端會經過app.$mount('#app')掛載到服務端生成的元素上，並變爲響應式的。 注意一下，此處將模板 html 修改成服務端渲染適用的模板了，但項目中的 dev 模式也適用的這個模板，但會由於找不到#app到報錯，能夠這樣處理一下:

  1. 最簡單的辦法，爲dev模式單獨創建一個 html 模板。。。（下面會提到）
  2. 爲dev模式也集成服務端渲染模式，這樣不管生產環境與開發環境共同處於服務端渲染模式下也是至關靠譜的一件事。(官方例子是這樣操做的)（這個還不會弄）
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vue-ssr-demo</title>
  </head>
  <body>
    <!--vue-ssr-outlet-->
  </body>
</html>
複製代碼

運行命令

npm run build
複製代碼

而後在dist目錄下可見生成的兩個 json 文件: vue-ssr-server-bundle.json與vue-ssr-client-manifest.json。

這兩個文件都會應用在 node 端，進行服務器端渲染與注入靜態資源文件。

根目錄下的server.js（服務端運行的js）

(官方例子使用的express，因此此 demo 將採用koa2來做爲服務器端，固然，不管是 koa 與 express 都不重要…)

npm i -S koa
複製代碼

在項目根目錄建立server.js，內容以下

const Koa = require('koa')
const app = new Koa()
 
// response
app.use(ctx => {
  ctx.body = 'Hello Koa'
})
 
app.listen(3001)
複製代碼

修改server.js代碼

須要安裝koa靜態資源中間件: npm i -D koa-static

const Koa = require('koa')
const app = new Koa()
const fs = require('fs')
const path = require('path')
const { createBundleRenderer } = require('vue-server-renderer')
 
const resolve = file => path.resolve(__dirname, file)
 
// 生成服務端渲染函數
const renderer = createBundleRenderer(require('./dist/vue-ssr-server-bundle.json'), {
  // 推薦
  runInNewContext: false,
  // 模板html文件
  template: fs.readFileSync(resolve('./index.html'), 'utf-8'),
  // client manifest
  clientManifest: require('./dist/vue-ssr-client-manifest.json')
})
 
function renderToString (context) {
  return new Promise((resolve, reject) => {
    renderer.renderToString(context, (err, html) => {
      err ? reject(err) : resolve(html)
    })
  })
}
app.use(require('koa-static')(resolve('./dist')))
// response
app.use(async (ctx, next) => {
  try {
    const context = {
      title: '服務端渲染測試', // {{title}}
      url: ctx.url
    }
    // 將服務器端渲染好的html返回給客戶端
    ctx.body = await renderToString(context)
 
    // 設置請求頭
    ctx.set('Content-Type', 'text/html')
    ctx.set('Server', 'Koa2 server side render')
  } catch (e) {
    // 若是沒找到，放過請求，繼續運行後面的中間件
    next()
  }
})
 
app.listen(8080)
    .on('listening', () => console.log('服務已啓動'))
    .on('error', err => console.log(err))
複製代碼

本地啓動

運行啓動服務命令:

node server.js
複製代碼

瀏覽器訪問: localhost:8080，截圖爲服務器渲染成功的頁面

部署到服務器

部署到服務器的時候須要將整個文件放上去 而後再文件夾內跑npm run build(沒有將node_modules放上去的話須要npm install)，而後npm run build以後node server.js

本地怎麼去調試代碼

首先新建一個htmldev.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <div id="app"></div>
</body>
</html>
複製代碼

修改一下package.json裏面的命令

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
複製代碼
  1. 若是提醒沒有什麼依賴就安裝什麼依賴
  2. 若是遇到webpack版本不兼容的狀況就換版本

修改config文件夾下的index.js

修改webpack.dev.conf.js配置

怎麼使用去使用document/window對象

網上找了一些答案，可是都沒有例子，多是我打開的方式不對纔沒有找到，因此就只能按照那些答案的思路去實踐。（固然，最好的方法就是不使用這兩個對象（手動狗頭））

可是在必定要使用的狀況下，能夠通過webpack的DefinePlugin來定義一個變量進行判斷當前運行環境（這個變量在以前的配置文件就有了），下面咱們看看

webpack.server.conf.js 

new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
      'process.env.VUE_ENV': '"server"'
    })
複製代碼

webpack.prod.conf.js 

new webpack.DefinePlugin({
            'process.env': env,
            'process.env.VUE_ENV': '"client"' // 增長process.env.VUE_ENV
        })
複製代碼

咱們能夠經過process.env.VUE_ENV這個來判斷當前運行環境，例如

mounted() {
        if (process.env.VUE_ENV == "server") {
            console.log("服務端");
        } else {
            console.log("客戶端");
            console.log(document.getElementById("ooooo"));
        }
    }
複製代碼

vue-ssr部分使用是轉載於這裏（不過上面是我本身敲了一次，並把遇到的問題提出來和解決,他那邊有我沒有的，我這裏有他沒有的，哈哈哈哈）

nuxt.js框架

這個和vue的框架差很少，用過vue腳手架的基本看一下官方文檔就能夠上手（這裏說的是上手，不是熟練使用）

這裏推薦直接看掘金一位大神的我的博客

上面若是有哪裏說錯，請在評論區留言，我會及時作更改，謝謝你們了。。。。。

我的吐槽

最近公司須要用到這個，就去調研了這個，落下了我親愛的組件庫了，我會繼續努力更新的（主要是懶，清明三天假，就是睡覺，打機，看動漫）

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程