webpack 之 webpack 进阶用法的 SSR 打包、优化构建命令、构建异常和中断处理

本文详细介绍了webpack服务端渲染（SSR）的实现和优化，包括使用react-dom/server进行渲染、处理样式问题、解决首屏数据加载以及构建日志优化。此外，还探讨了构建异常和中断的处理方法，如利用process.exit主动处理错误。通过这些技巧，可以提升SSR性能，减少白屏时间，并改善SEO。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、 webpack 进阶用法的 SSR 打包、优化构建命令、构建异常和中断处理

页面打开过程，开始加载 -> HTML 加载成功后开始加载数据 -> 数据加载成功后渲染成功开始、加载图片资源 -> 图片加载成功、页面可交互
服务端渲染 SSR 是什么，如下所示：

渲染：HTML + CSS + JS + Data -> 渲染后的 HTML
服务端：所有模版等资源都存储在服务端，内网机器拉取数据更快，一个 HTML 返回所有的数据

浏览器和服务器交互流程，请求开始 -> server -> HTML template、data -> server render -> 浏览器解析并渲染，用户呈现 -> 加载并指向 js 和其它资源 -> 页面完全可交互
客户端渲染 vs 服务端渲染，服务端渲染 SSR 的核心是减少请求，如下所示：

客户端渲染，请求是多个请求(HTML、数据等)，加载过程是 HTML 和数据串行加载，渲染是前端渲染，可交互是图片等静态资源加载完成，JS 逻辑执行完成可交互
服务端渲染，请求是 1 个请求，加载过程是 1 个请求返回 HTML 和数据，渲染是服务端渲染，可交互是图片等静态资源加载完成，JS 逻辑执行完成可交互

SSR 的优势，减少白屏时间，对于 SEO 友好。
SSR 代码实现思路，服务端使用 react-dom/server 的 renderToString 方法将 React 组件渲染成字符串，服务端路由返回对应的模版，客户端打包出针对服务端的组件，代码如下：

const express = require('express');
const {
    renderToString } = require('react-dom/server');
const SSR = require('../dist/search-server');

server(process.env.PORT || 3000);

function server (port) {
   
  const app = express(