深扒Webpack 5.0+SSR坑位，助您踏上Server Side Rendering征途

2024-02-04 03:08:24

前言
随着前端工程化理念的普及，Server Side Rendering（以下简称SSR）技术逐渐成为构建高性能Web应用程序的首选方案。Webpack作为前端工程化的利器，自然也为SSR提供了强大的支持。本文将基于Webpack 5.0版本，深入探讨SSR实现过程中可能遇到的各种坑位，并提供对应的解决方案，帮助开发人员快速上手并避免潜在问题。

一、SSR概述

SSR的基本原理是将前端代码预渲染成静态HTML，然后在服务器端直接返回给客户端，从而提高页面加载速度和用户体验。相较于传统的客户端渲染（CSR）方式，SSR具有以下优点：

首屏加载速度快：SSR能够在服务器端预先渲染好页面内容，当用户访问页面时，服务器可以直接返回渲染好的HTML，无需等待前端代码下载和执行，因此首屏加载速度极快。
搜索引擎优化（SEO）友好：SSR能够生成完整的HTML内容，有利于搜索引擎抓取和索引，从而提高网站的SEO排名。
用户体验好：SSR能够避免CSR常见的白屏和闪烁现象，为用户提供更加流畅和愉悦的使用体验。

二、Webpack SSR实践

Webpack 5.0对SSR功能进行了全面升级，提供了更加灵活和强大的配置选项。以下是Webpack SSR实践的一般步骤：

安装依赖项：

npm install webpack webpack-cli webpack-node-externals @vue/server-renderer

配置Webpack：

module.exports = {
  // ...其他配置
  target: 'node',
  entry: './src/entry-server.js',
  output: {
    libraryTarget: 'commonjs2',
  },
  externals: [
    webpackNodeExternals(),
  ],
  plugins: [
    new VueSSRServerPlugin(),
  ],
};

编写服务端代码：

const express = require('express');
const { createBundleRenderer } = require('vue-server-renderer');
const app = express();

const bundle = require('./dist/server-bundle.json');
const clientManifest = require('./dist/client-manifest.json');

const renderer = createBundleRenderer(bundle, {
  runInNewContext: false,
});

app.get('*', (req, res) => {
  const context = {
    url: req.url,
  };

  renderer.renderToString(context).then((html) => {
    res.send(html);
  }).catch((err) => {
    console.error(err);
    res.status(500).send('Internal Server Error');
  });
});

app.listen(3000);