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

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

  1. 页面打开过程,开始加载 -> HTML 加载成功后开始加载数据 -> 数据加载成功后渲染成功开始、加载图片资源 -> 图片加载成功、页面可交互
  2. 服务端渲染 SSR 是什么,如下所示:
  • 渲染:HTML + CSS + JS + Data -> 渲染后的 HTML
  • 服务端:所有模版等资源都存储在服务端,内网机器拉取数据更快,一个 HTML 返回所有的数据
  1. 浏览器和服务器交互流程,请求开始 -> server -> HTML template、data -> server render -> 浏览器解析并渲染,用户呈现 -> 加载并指向 js 和其它资源 -> 页面完全可交互
  2. 客户端渲染 vs 服务端渲染,服务端渲染 SSR 的核心是减少请求,如下所示:
  • 客户端渲染,请求是多个请求(HTML、数据等),加载过程是 HTML 和数据串行加载,渲染是前端渲染,可交互是图片等静态资源加载完成,JS 逻辑执行完成可交互
  • 服务端渲染,请求是 1 个请求,加载过程是 1 个请求返回 HTML 和数据,渲染是服务端渲染,可交互是图片等静态资源加载完成,JS 逻辑执行完成可交互
  1. SSR 的优势,减少白屏时间,对于 SEO 友好。
  2. SSR 代码实现思路,服务端使用 react-dom/serverrenderToString 方法将 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();
  
  app.use(express.static('dist'));
  app.get('/search', (req, res) => {
    console.log('Server response template', renderToString(SSR));
    res.status(200).send(renderMarkup(renderToString(SSR)));
  });
  app.listen(port, () => {
    console.log('server is running on port;' + port);
  });
}

function renderMarkup(html) {
  return `
    
  
    
      服务端渲染
      
    
    
      
${html}
`
; }
  1. webpack ssr 打包存在的问题,如下所示:
  • 浏览器的全局变量,Node.js 中没有 document、window,组件适配将不兼容的组件根据打包环境进行适配,请求适配将 fetch 或者 ajax 发送请求的写法改成 isomorphic-fetch 或者 axios
  • 样式问题,Node.js 无法解析 css,方案一是服务端打包通过 ignore-loader 忽略掉 CSS 的解析,方案二是将 styled-loader 替换成 isomorphic-style-loader
  1. 如何解决样式不显示的问题,使用打包出来的浏览器端 html 为模版,设置占位符,动态插入组件,代码如下:
<body>
  <div id="root">div>
body>
  1. 首屏数据如何处理,服务端获取数据,替换占位符,代码如下:
<body>
  <div id="root">div>
  
  
body>
  1. 当前构建时的日志显示,展示一大堆日志,很多并不需要开发者关注,对于统计信息 stats,如下所示:
  • errors-only,none,只在发生错误时输出
  • minimal,none,只在发生错误或有新的编译时输出
  • none,false,没有输出
  • normal,true,标准输出
  • verbose,none,全部输出
  1. 如何优化命令行的构建日志,使用 friendly-errors-webpack-pluginsuccess 构建成功的日志提示,warning 构建警告的日志提示,error 构建报错的日志提示,stats 设置成 errors-only,代码如下:
module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name][chunkhash:8].js',
    path: _dirname + '/dist'
  },
  plugins: [
    new FriendlyErrorsWebpackPlugin()
  ],
  stats: 'errors-only'
};
  1. 如何判断构建是否成功,如下所示:
  • CI/CDpipline 或者发布系统需要知道当前构建状态
  • 每次构建完成后输入 echo $? 获取错误码
  1. 构建异常和中断处理,如下所示:
  • webpack4 之前的版本构建失败不会抛出错误码 error code
  • Node.js 中的 process.exit 规范,0 表示成功完成,回调函数中,errnull;非 0 表示执行失败,回调函数中,err 不为 nullerr.code 就是传给 exit 的数字
  1. 如何主动捕获并处理构建错误,compiler 在每次构建结束后会触发 done 这个 hookprocess.exit 主动处理构建错误,代码如下:
plugins: [
  function () {
    this.hooks.done.tap('done', (stats) => {
      if (stats.compilation.errors && stats.compilation.errors.length && process.argv.indexOf('--watch') == -1 ) {
        console.log('build error');
        process.exit(1);
      }
    })
  }
]

你可能感兴趣的:(Webpack,Vite,Gulp,webpack,构建异常,中断处理,SSR,打包,优化构建命令)