Vue2 + Webpack5 + Express搭建一套简易SSR服务
站长
· 阅读数 13
- 原文地址（本人博客）：www.waylon.online/blog?id=efb…
前言
SSR（Server-Side Rendering）服务端渲染是指在服务器端将页面的 HTML、CSS、JavaScript 等内容直接解析成完整的 HTML 页面并返回给客户端，而不是像传统的客户端渲染（CSR）那样，先将页面的骨架结构返回给客户端，再由客户端通过 JavaScript 操作来动态生成页面内容。
SSR 可用于各种 Web 应用程序，旨在提高首屏速度以及SEO；市面上成熟的SSR框架也有许多，诸如Next.js、Nuxt.js，但本篇文章我们不深入讨论这些SSR框架，而是自己动手搭建一套SSR服务；
技术栈
- 工程化：Webpack5
- 服务端：Express、EJS
- Web框架：Vue2.7
更加详细的技术栈以及依赖可以参考下面的dependencies:
"dependencies": {
"ejs": "^3.1.9",
"express": "^4.18.2",
"vue": "2.7.14",
"vue-router": "^3.6.5",
"vue-server-renderer": "^2.7.14",
"webpack-merge": "^5.9.0",
"webpack-node-externals": "^3.0.0"
},
"devDependencies": {
"cross-env": "^7.0.3",
"css-loader": "^6.8.1",
"html-webpack-plugin": "^5.5.3",
"less": "^4.1.3",
"less-loader": "^11.1.3",
"swc-loader": "^0.2.3",
"vue-demi": "0.13.1",
"vue-loader": "15.10.1",
"vue-style-loader": "^4.1.3",
"webpack": "^5.88.1",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1"
}
搭建项目
首先介绍下整个服务的系统架构,架构如下:
📦webpack5-vue2.7-ssr-demo-waylon
┣ 📂build - 构建相关
┃ ┣ 📜util.js - 公共方法
┃ ┣ 📜webpack.base.js - 基本构件配置
┃ ┣ 📜webpack.client.js - 客户端配置
┃ ┣ 📜webpack.config.js - 构建入口
┃ ┣ 📜webpack.dev.js - 本地开发
┃ ┗ 📜webpack.server.js - 服务端构建
┣ 📂dist - Express static目录 以及 构建产物地址
┃ ┣ 📂client - 客户端产物
┃ ┃ ┣ 📜index.js
┃ ┃ ┗ 📜vue-ssr-client-manifest.json
┃ ┗ 📂server - 服务端产物
┃ ┃ ┗ 📜vue-ssr-server-bundle.json
┣ 📂public - 模板
┃ ┣ 📜index.ejs - 生产环境模板
┃ ┗ 📜template.html - 本地开发模板
┣ 📂src
┃ ┣ 📂controllers - Express controller
┃ ┃ ┗ 📜index.js
┃ ┣ 📂routes - Express route 服务器路由
┃ ┃ ┗ 📜index.js
┃ ┣ 📂services - Express service
┃ ┃ ┗ 📜index.js
┃ ┣ 📂vue - vue 静态页面代码
┃ ┃ ┣ 📂pages - 前端页面
┃ ┃ ┃ ┣ 📂About
┃ ┃ ┃ ┃ ┗ 📜index.vue
┃ ┃ ┃ ┗ 📂Home
┃ ┃ ┃ ┃ ┗ 📜index.vue
┃ ┃ ┣ 📂router 前端路由
┃ ┃ ┃ ┗ 📜index.js
┃ ┃ ┣ 📜app.js 处理app.vue
┃ ┃ ┣ 📜App.vue 根组件
┃ ┃ ┣ 📜entry-client.js 客户端入口
┃ ┃ ┣ 📜entry-server.js 服务端入口
┃ ┃ ┗ 📜main.js 入口文件
┃ ┗ 📜index.js Express执行文件
┣ 📜.gitignore
┣ 📜.prettierrc.js
┣ 📜package.json
┣ 📜pnpm-lock.yaml
┗ 📜README.md
核心代码
要实现Vue的SSR功能，离不开Vue官方提供的vue-server-renderer这个包，该包专门为Vue2.0+提供Node.JS服务器渲染的功能。
客户端
编写Vue App
<template>
<main id="app">
<div class="header"></div>
<div class="content">
<div>{{ title }}</div>
<router-view />
</div>
<div class="footer"></div>
</main>
</template>
<script setup>
import { ref } from 'vue';
const title = ref('Hello World!');
</script>
<style lang="less" scoped>
.header {
background-color: #000;
color: #fff;
height: 80px;
width: 100%;
position: fixed;
top: 0;
right: 0;
left: 0;
}
.content {
margin-top: 80px;
margin-bottom: 80px;
}
.footer {
background-color: #000;
color: #fff;
height: 80px;
width: 100%;
position: fixed;
bottom: 0;
right: 0;
left: 0;
}
</style>
前端路由
这里须对路由做按需加载：
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export function createRouter() {
return new Router({
mode: 'history',
routes: [
{
path: `/home`,
name: 'home',
component: () => import(/* webpackChunkName: "home" */ '../pages/Home'),
},
{
path: `/about`,
name: 'about',
component: () => import(/* webpackChunkName: "home" */ '../pages/About'),
}
]
})
}
暴露工厂函数
我们为每个请求创建一个新的根 Vue 实例，如果我们在多个请求之间使用一个共享的实例，很容易导致交叉请求状态污染，所以，我们不应该直接创建一个应用程序实例，而是应该暴露一个可以重复执行的工厂函数，为每个请求创建新的应用程序实例：
import App from './App.vue'
import { createRouter } from './router'
export function createApp(context) {
// 创建 router 实例
const router = createRouter(context)
const app = new Vue({
// 注入 router 到根 Vue 实例
router,
render: h => h(App)
})
// 返回 app 和 router
return { app, router }
}
服务端入口
用于生成vue-ssr-server-bundle.json文件，后者为Vue SSR中的核心文件，它被用于传递给 createBundleRenderer并完成服务端渲染，通过这个文件，我们将生成一份服务端渲染好的静态HTML，此时我们的网页是没有绑定任何js事件的，并且如果你检查服务器渲染的输出结果，你会注意到应用程序的根元素上添加了一个特殊的属性：data-server-rendered="true"，它的目的让客户端 Vue 知道这部分 HTML 是由 Vue 在服务端渲染的，并且应该以激活模式进行挂载。
import { createApp } from './app'
export default context => {
// 因为有可能会是异步路由钩子函数或组件，所以我们将返回一个 Promise，
// 以便服务器能够等待所有的内容在渲染前，
// 就已经准备就绪。
return new Promise((resolve, reject) => {
const { app, router } = createApp(context)
// 设置服务器端 router 的位置
router.push(context.originalUrl)
// 等到 router 将可能的异步组件和钩子函数解析完
router.onReady(() => {
const matchedComponents = router.getMatchedComponents()
// 匹配不到的路由，执行 reject 函数，并返回 404
if (!matchedComponents.length) {
return reject({ code: 404 })
}
// Promise 应该 resolve 应用程序实例，以便它可以渲染
resolve(app)
}, reject)
})
}
客户端入口
生成clientManifest.json，后者会包含编译产物中一些静态资源路径、同步模块、异步模块等关键信息，主要用于客户端激活（也称之为：水合）：
import { createApp } from './app'
const { app, router } = createApp()
router.onReady(() => {
app.$mount('#app')
})
服务端
Express入口
这里我们选择使用Express框架搭建我们的后端服务器，因为它小巧、灵活的特性，以及路由、中间件（本文暂未提及）等功能能让我们更方便地去搭建后端服务器：
const { resolve } = require('../build/util.js')
const express = require('express')
const ejs = require('ejs')
const app = express()
const port = 3000
app.use(express.static(resolve('../dist')))
// 注册模版引擎
app.engine('.ejs', ejs.__express)
app.set('views', resolve('../public')); //设置视图的对应目录
app.set('view engine', 'ejs')
// 允许设置代理
app.enable('trust proxy')
app.use(require('./routes')(app))
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})
Express 路由
const router = require('express').Router()
const controller = require('../controllers')
module.exports = (app) => {
router.get('*', controller)
return router
}
Express 控制器
controller可以用于处理不同的中间件逻辑，因为我们的服务比较简单，所以并没有用上中间件，仅仅是为了突出项目结构设计：
const baseService = require('../services');
module.exports = (req, res) => {
baseService(req, res);
}
Express 服务
服务端渲染核心代码，通过前面的服务端入口文件以及客户端入口文件生成的vue-ssr-server-bundle.json与vue-ssr-client-manifest.json,结合EJS模版服务，实现服务端渲染。
const { createBundleRenderer } = require('vue-server-renderer')
const bundle = require('../../dist/server/vue-ssr-server-bundle.json')
const clientManifest = require('../../dist/client/vue-ssr-client-manifest.json')
const renderer = createBundleRenderer(bundle, { runInNewContext: false, clientManifest })
module.exports = (req, res) => {
const context = { originalUrl: req.originalUrl };
renderer.renderToString(context, (err, main) => {
if (err) {
return res.status(500).end(JSON.stringify(err));
}
res.render('index', {
title: 'ssr demo',
main,
context,
})
})
}
EJS模版服务
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<%# 拿到title并输出 %>
<title><%- title %></title>
<link rel="stylesheet" href="https://www.npmjs.com/package/normalize.css">
</head>
<body>
<%- typeof main !== 'undefined' && main || '<div id="app"/>' %>
<%- context.renderScripts() %>
</body>
</html>
工程化相关
构建入口
// build\webpack.config.js
const webpack = require('webpack');
const { NODE_ENV } = process.env;
let requirePath = `./webpack.${NODE_ENV}`;
const webpackConfig = require(requirePath);
webpack(webpackConfig(), (err, stats) => {
if (err) throw err;
process.stdout.write(
`${stats.toString({
colors: true,
modules: false,
children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
chunks: false,
chunkModules: false
})}\n\n`
);
if (stats.hasErrors()) {
process.exit(1);
}
});
基本构建配置
// build\webpack.base.js
const { VueLoaderPlugin } = require('vue-loader')
const { resolve } = require('./util');
module.exports = {
stats: 'verbose',
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('src'),
},
modules: ['node_modules']
},
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader",
},
{
test: /\.css$/,
use: ["vue-style-loader", "css-loader"],
sideEffects: true, // 有副作用 支持import css 配合Tree Shaking
},
{
test: /\.less$/,
use: ["vue-style-loader", "css-loader", "less-loader"]
},
{
test: /\.(svg|gif|png|jpe?g)$/,
type: "asset/inline",
},
{
test: /\.(otf|ttf|woff2?|eot)$/,
type: "asset/inline",
},
],
},
plugins: [
new VueLoaderPlugin()
],
};
服务端构建
// build\webpack.server.js
const { merge } = require('webpack-merge')
const nodeExternals = require('webpack-node-externals')
const baseConfig = require('./webpack.base.js')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
const { resolve } = require('./util');
module.exports = () => merge(baseConfig, {
mode: 'production',
// 将 entry 指向应用程序的 server entry 文件
entry: resolve('../src/vue/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: {
path: resolve('../dist/server'),
filename: 'server-bundle.js',
libraryTarget: 'commonjs2'
},
// https://webpack.js.org/configuration/externals/#function
// https://github.com/liady/webpack-node-externals
// 外置化应用程序依赖模块。可以使服务器构建速度更快，
// 并生成较小的 bundle 文件。
externals: nodeExternals({
// 不要外置化 webpack 需要处理的依赖模块。
// 你可以在这里添加更多的文件类型。例如，未处理 *.vue 原始文件，
// 你还应该将修改 `global`（例如 polyfill）的依赖模块列入白名单
allowlist: /\.css$/
}),
// 这是将服务器的整个输出
// 构建为单个 JSON 文件的插件。
// 默认文件名为 `vue-ssr-server-bundle.json`
plugins: [
new VueSSRServerPlugin(),
]
})
客户端构建
// build\webpack.client.js
const { merge } = require('webpack-merge')
const baseConfig = require('./webpack.base.js')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
const { resolve } = require('./util.js');
module.exports = () => merge(baseConfig, {
mode: 'production',
entry: resolve('../src/vue/entry-client.js'),
output: {
path: resolve('../dist/client'),
filename: 'index.js',
chunkFilename: '[id].js',
publicPath: '/client/',
clean: true
},
optimization: {
splitChunks: {
chunks: 'async',
minSize: 20000,
minRemainingSize: 0,
minChunks: 1,
maxAsyncRequests: 30,
maxInitialRequests: 30,
enforceSizeThreshold: 50000,
cacheGroups: {
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
reuseExistingChunk: true,
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
},
},
},
},
plugins: [
// 此插件在输出目录中
// 生成 `vue-ssr-client-manifest.json`。
new VueSSRClientPlugin()
]
})
本地开发
本地开发暂时只支持CSR，后续再把SSR本地开发补上~
// build\webpack.dev.js
const { merge } = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const baseConfig = require('./webpack.base.js')
const { resolve } = require('./util');
module.exports = merge(baseConfig, {
mode: 'development',
entry: resolve('src/vue/main.js'),
output: {
path: resolve('dist'),
filename: 'index.js',
chunkFilename: '[id].js',
clean: true
},
plugins: [
new HtmlWebpackPlugin({
title: "webpack5-vue2-ssr-demo",
filename: "index.html",
template: resolve("public/template.html"),
}),
],
devServer: {
hot: true,
open: false,
host: 'localhost',
port: 2513 //'origin'
}
})
启动服务
主要命令如下：
"scripts": {
"dev": "cross-env NODE_ENV=dev webpack serve --progress --config build/webpack.dev.js",
"build": "pnpm build:ssr && pnpm build:clt",
"build:ssr": "cross-env NODE_ENV=server node build/webpack.config.js --hide-modules",
"build:clt": "cross-env NODE_ENV=client node build/webpack.config.js --hide-modules",
"start": "node src/index.js"
},
发布之前须触发pnpm build生成对应的文件，再通过pnpm start启动Express服务即可~
效果图如下：
结语
自此，我的简易SSR服务大功告成，功能比较简陋，主要是为了给自己梳理一遍Vue实现SSR的流程，献丑了。 项目源码在此：github.com/waylonzheng…
参考文献
转载自:https://juejin.cn/post/7251903805980459045