[JavaScript知识库]nuxt.js服务端渲染项目性能优化总结

众所周知，Vue作为前端开发的三大框架扛把子之一，在国内众多小微厂使用还是很多的，都知道Vue一般作为客户端渲染模式，在某些业务场景可能十分不友好，比如电商业务；为啥说不友好呢，因为Vue一般是使用客户端渲染，数据都是通过Ajax请求回来的，搜索引擎无法抓取到动态的内容，所以要用到服务端渲染，服务端有多种实现方式，Vue官方也自带SSR解决方案，Vue服务端渲染
由于项目前端使用的是Nuxt实现的SSR，在其中也踩了不少坑，做过几轮性能优化，下面通过实际项目经验总结一下：

从项目基础配置方面

1. 页面布局结构化，例如：footer，header，main等解构语义标签的应用

<!--default.vue-->
<header>
<!--网站公用头部-->
</header>
<main>
	<!--网站试图渲染-->
    <Nuxt />
</main>
<footer>
<!--网站公用底部-->
</footer>

2. 使用Webpack这个工具进行合理的文件拆包，Webpack用好之后十分强大，最后项目文件编译之后包文件大小是固定的，如果拆包粒度过小，导致并发请求多，每个请求中TTFB里等待时间较长，如果拆包粒度过大，导致下载时间较长，需要不断调试，寻找适合项目的平衡点；Webpack拆包文档
3. 第三方包组件安装依赖按需引入加载，如果是协助辅助开发环境的npm包或辅助编译的包不要安装在生产环境，会被打包进包文件中，导致包文件过大；分析打包之后的文件包含的依赖，移除无用的plugins（如移动端的vconsole工具）；一般脚手架都自带分析工具指令，如package.json下"build:ana": "nuxt build --analyze"，运行npm run build:ana，会展示编译后包文件包含的大小，将不需要的资源移除；
4. 合理使用vue-lazy-hydration水合组件，合理使用客户端渲染，可有效防止页面偏移分数和LCP分数；
5. 合理使用CDN缓存，如脚本资源、图片等放CDN；
6. 合理引入加载第三方脚本，如livechat、 googleMap等脚本的初始化脚本，如非必要可使用滚屏加载初始化脚本或在需要使用的模块使用初始化脚本；
7. 图片大小优化，如单张占位图可压缩后使用大小缩小了5.5倍；压缩链接

除了项目基础配置能大幅提高项目测试评分外，还有很大一部分源于各位编程大佬的编码风格和程序稳定性，小厂一般都没啥规范，规范也不容易推行起来，下面我们从项目规范方便再讲一讲：

从项目编码规范方面

1. 首页首屏加载移除无用的网络加载请求，看不到的地方使用滚屏加载（可以判断是否是爬虫），真正实现所看即所得，首页删除多余的相同功能的组件引入；
2. 项目组件引入懒加载，如初始状态组件不需要展示的组件可优先不渲染组件（v-if）；
3. 项目中组件粒度的合理拆分和组件封装复用；
4. 项目编码删除冗余的嵌套HTML标签，融合可以减少的HTML嵌套标签，减少组件之间的嵌套层级，嵌套层级越深，DOM层级就越深；
5. 正确的使用HTML标签嵌套，p、h1~h5等标签含有语义，里面不可嵌套块级标签，尽可能不嵌套其他HTML标签；
6. 首页banner使用原生HTML标签使用背景图占位，可加快FCP和LCP的速度，Element-UI 的bannerUI组件解析渲染速度相对较慢；

<!--index.vue-->
<div style="150px" v-if="!bannerList.length">
<!--使用CSS背景占位，加快首屏渲染和最大页面元素渲染-->
<div>

<el-carousel height="150px" v-else>
  <el-carousel-item v-for="item in 4" :key="item">
     <h3 class="small">{{ item }}</h3>
   </el-carousel-item>
 </el-carousel>
  <!--to do ...-->
 
 <script>
 // ...
 data() {
   return {
   	bannerList: []  // 通过ajax拿到数据赋值
   }
}
 </script>

7. 服务端asyncData使用安全的解构语法(let { data } = res || {};)解构服务端数据，服务端数据解构异常报错不会体现在浏览器上，出现问题十分难排查；
8. 合理使用公共方法，将页面中大量的逻辑判断条件抽离成函数或计算属性；

附上相关链接：
测分网站
LCP
FCP