运行时优化

1.用v-if代替v-show

两者的区别在于v-if不渲染DOM，而v-show预渲染DOM

除以下情况外，使用v-show，其他情况下尽量使用v-if

有一个预渲染要求

需要频繁切换显示状态

2.v-for必须添加键，同时避免使用v-if

通常，我们倾向于在两种常见的情况下这样做。

筛选列表中的项目，如“用户”中的v-for=“用户”v-if=“用户”。isactive。在这种情况下，请用计算属性(如活动用户)替换用户以返回筛选列表

为了避免呈现应该隐藏的列表，例如v-for=' user in users ' v-if=' should show users '。在这种情况下，将v-if移动到容器元素(如ul、ol)

3.事件被及时摧毁了

当Vue组件被销毁时，它将自动清理它与其他实例的连接，并解除绑定它的所有指令和事件侦听器，但只解除绑定组件本身的事件。

也就是说，在js中使用addEventListener不会被自动销毁，因此我们在销毁组件时需要手动移除对这些事件的监控，以避免内存泄漏，例如：

created(){ addevent listener(' touch move ')的第一次屏幕优化。touchmove，false)}，在destroy(){ removeevent listener(' touch move ')之前，这。touchmove，false)}

1.图片剪切和使用webp

图像需要裁剪。通常，您可以通过使用双图像尽可能多地使用webp图像。如果使用vue-lazyload插件，可以使用以下方法替换webp(使用v-lazy指令替换图像)Vue.use(VueLazyload，{ error: require ')。/assets/img/default pic _ small . png ')，filter : { webp(listener : any，options: any) { if(！options.supportWebp)返回//listener.src='。webp ' } } })；2.提前申请资源

根据测试，Vue项目中每个文件的加载顺序为router.js、main.js、App.vue、[-page-]。vue，[组件]。vue，如图所示：

其中，路由器的加载时间比page.vue快近100ms，如果page.vue中文件较多，时间差会更大

因此，您可以在装载和呈现页面时请求接口数据，例如在router.js:

从' vue-router '导入存储区导入路由器。/store ' store . dispatch(' init Ajax ')3。异步路由

异步路由可以根据URL自动加载所需页面的资源，不会造成页面阻塞，更适合移动页面

建议主页面直接导入，非主页面使用异步路由

用法：

{path:'/order '，component: ()=import('。/view/order . vue ')} 4。异步组件

不需要在第一个屏幕上加载的组件都是由异步组件(如multi-tab)加载的，包括需要触发条件的动作和异步组件(如弹出)。使用方式为：v-if控制展示机会，引入组件的Promise

template div hello world v-if=' showHello '/div/templatescriptexport default { components 3360 { hello world :()=import('./components/Helloworld。vue')}，data(){ return { show hello : false } }，methods : { init async(){ addevent listener(' scroll '，(e)={if (scrolly100) {this。showhello=true}})}}

使用webpack-bundle-analyzer检查项目中所有包的数量，并尝试为更大的插件包找到轻量级的替代包

第一屏没有用到的插件，或者只在特定场景下使用的插件，使用异步加载(比如定位插件，有些情况下经纬度可以通过URL传输；或者生成一个图片插件，点击时需要触发)；第一次加载插件后，它会在本地缓存，并以下列方式使用：

//以定位插件为例。Const latitude=geturlparam(' latitude ')Const经度=geturl param('经度')//如果没有经纬度参数，使用定位插件获取经纬度if(！纬度||！经度){//第一次加载位置插件//webpack4。如果使用webpack3及以下版本，wait import('locationPlugin ')可以是if(！这个。这个。wheelami=(等待导入('位置插件')。default//dosth.} 6.公共CDN

使用公共的CDN资源可以起到缓存的作用，减少打包量

网络最佳化

1.减少网络请求

浏览器同时对同一个域名有一定数量的请求(通常为6个)，超过限制的请求将被阻止。第一个屏幕将最小化对相同域名的请求，包括接口和JS；根据需要减少第一个屏幕上的chunk.js并合并接口请求

2.合理使用预加载、dns预取和预取

预加载具有较高的加载优先级，可以通过使用间隙时间将加载和执行分开来预加载资源。不阻止呈现和记录的onload事件每次与域名连接时都需要DNS解析。DNS预取，可以利用dns-prefetch预解析域名，会预加载页面未来可能使用的一些资源，优先级较低。对于首屏渲染要求高的项目，不建议使用这三种方法。将它们添加到标题标签中(vue-cli-3已相应配置):

head meta charset=' utf-8 '/meta http-equiv=' X-UA-Compatible ' content=' IE=edge '/meta name=' viewport ' content=' width=device-width，initial-scale=1 '/link rel=' icon ' href='/dist/favicon . ico ' rel=' external no follow '/！-DNS-前缀写入-链接rel=' DNS-前缀' href='//www . dpfile.com ' rel=' external no follow '/title MD-config/title！-预加载写入，as属性必须是-link href='/dist/CSS/app . 52 DD 885 e . CSS ' rel=' external nofollow ' rel=' preload ' as=' style '/link href='/dist/js/app . 05 fa F3 b5 . js ' rel=' external nofollow ' rel=' preload ' as=' script '/link href='/dist/js/chunk-venders . 04343 b1f . js ' rel=' external nofollow ' rel='-前缀写入-link href='/dist/js/chunk-venders . 04343 b1f . js ' rel=' external nofollow ' rel=' external nofollow ' rel=' prefix '/head 3，PWA

PWA支持缓存HTML文档、接口(get)等。并且减少了页面的白屏时间，从而即使在网络薄弱甚至断开的情况下，也可以快速显示页面

编译和打包优化

1.升级Vue-Cli-3

Vue-cli-3采用了webpack4 babel7，它在编译和打包方面进行了许多优化(双倍改进)，使用了纱线作为包管理工具，并为许多优化的最佳实践进行了默认配置

经过测试，将项目从vue-cli-2迁移到vue-cli-3后，速度变化如下：

编译时间：44s - 7s封装时间：55s - 11s

效率提升非常明显

2、SSR

对于加载性能要求高的项目，建议升级SSR