最常见的:
路田懒加载:有效拆分App体积大小，访问时异步加载
const router = createRouter({
routes:[
//借助webpack的import()实现异步组件
{ path: /foo', component: () => import('./Foo.vue') }]
})keep-alive 缓存页面:避免重复创建组件实例，且能保留缓存组件状态
<keep-alive><component :is="component"></component>
</keep-alive>使用 v-show 复用DOM: 避免重复创建组件
<template><div class="cell"><!-- 这种情况用v-show复用D0M，比v-if效果好--><div v-show="value" class="on"><Count :num="18088"/> display:none</div><section v-show="!value" class="off"><Count :num="10000"/></section></div>
</template>长列表性能优化: 如果是大数据长列表，可采用虚拟滚动，只染少部分区域的内容，第三库vue-virtualscroller、vue-virtual-scroll-grid
图片懒加载
// vue-lazyload
<img v-lazy="/static/img/1.png">第三方插件按需引入（elementUI）
服务端涫染/静志网站生成:SSR/SSG
异步加载
说起异步加载，我们需要先了解一下什么是同步加载?
// 默认就是同步加载
<script src="http://abc.com/script.js"></script>同步模式又称阻塞模式，全阻止浏览器的后续处理，停止了后续的文件的解析，执行，如图像的渲染同步加载。流览器之所以会采用同步模式，是因为加载的js文件中有对dom的操作，重定向，输出document等默认行为，所以同步才是最安全的。所以一般我们都会把script标签放置在body结束标签之前，减少阻塞。
所以异步加载，其实就是一种非阻塞加载模式的方式，就是浏览器在下载执行is的同时，还会继续进行后续页面的处理。
几种常见的异步加载脚本方式:
async和defer
在JavaScript脚本增加async或者defer属性
//面试经常问:script标签的defer和async的区别?// defer要等到html解折完成之后执行脚本
<script src="main.js" defer></script)//async异步加载脚本后便会执行脚本
<script src="main.js" async></script>动态添加script标签
//js代码中动态添加script标签，并将其播入更面
const script =document.createElement("script");
script.src ="a.js";
document.head.appendchild(script);按需打包与按需加载
随着Webpack等构建工具的能力越来越强，开发者在构建阶段可以随心所欲地打造项目流程，与此同时按需加载和按需打包的技术曝光度也越来越高，甚至决定着工程化构建的结果，直接影响应用的性能优化。
两者的概念:
1、按需打包表示的是针对第三方依赖库及业务模块。只打包真正在运行时可能会用到的代码。
2、按需加载表示的是代码模块在交互的时候需要动态导入。
网页从打开输入url回车到整个网页加载出来，整个流程是怎样的