# 预渲染初探

在尝试优化自己做的地图应用访问速度时解除了预渲染概念,记录一下预渲染特点和简单实战

# 预渲染优点

  1. 预渲染可以优化 SEO,当你只需要改善某些页面的 SEO 时,不必使用 SSR,只需要使用预渲染即可。
  2. 预渲染可以实现将静态组件和图层保存到静态 HTML 文件中,用户请求页面时,这些事先保存的静态内容可以直接渲染,不必事先进行一次 diff 算法,可以提升页面响应速度。

# 避免使用预渲染的场景

  1. 大量路由: 如果站点路由有成百上千个,使用预渲染生成文件时将非常缓慢,虽然每次生成部署文件只需要执行一次,但是大部分用户并不会访问所有路由内容。
  2. 动态内容: 如果渲染页面是特定用户查看的内容,或者有其他源获取的动态内容,使用预渲染可能会在加载前显示占位符组件,直到动态内容加载到客户端位置,这样会提供一种比较奇怪的体验。

# 简单实战

在 vue.config.js 或者 webpack.config.js 中使用

module.exports = {
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        // 打包生成项目的路径
        staticDir: path.join(__dirname, 'dist'),
        // 需要渲染的路由
        routes: ["/", "/about", "/login", "/register"],
      })
    ]
  }
}
Last Updated: 12/15/2020, 4:52:31 PM