likes
comments
collection
share

Vue2 + Webpack5 + Express搭建一套简易SSR服务

作者站长头像
站长
· 阅读数 12

前言

SSR(Server-Side Rendering)服务端渲染是指在服务器端将页面的 HTML、CSS、JavaScript 等内容直接解析成完整的 HTML 页面并返回给客户端,而不是像传统的客户端渲染(CSR)那样,先将页面的骨架结构返回给客户端,再由客户端通过 JavaScript 操作来动态生成页面内容。

SSR 可用于各种 Web 应用程序,旨在提高首屏速度以及SEO;市面上成熟的SSR框架也有许多,诸如Next.js、Nuxt.js,但本篇文章我们不深入讨论这些SSR框架,而是自己动手搭建一套SSR服务;

Vue2 + Webpack5 + Express搭建一套简易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.jsonvue-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服务即可~ 效果图如下:

Vue2 + Webpack5 + Express搭建一套简易SSR服务

结语

自此,我的简易SSR服务大功告成,功能比较简陋,主要是为了给自己梳理一遍Vue实现SSR的流程,献丑了。 项目源码在此:github.com/waylonzheng…

参考文献

转载自:https://juejin.cn/post/7251903805980459045
评论
请登录