总结4个方面优化Vue项目
- - IT瘾-jianshu1、使用v-if代替v-show. 两者的区别是：v-if不渲染DOM，v-show会预渲染DOM. 除以下情况使用v-show，其他情况尽量使用v-if. 2、v-for必须加上key，并避免同时使用v-if. 一般我们在两种常见的情况下会倾向于这样做:. 为了过滤一个列表中的项目. 比如 v-for="user in users" v-if="user.isActive".
总结4个方面优化Vue项目
标签：
jianshu
| 发表时间：2019-10-27 00:00 | 作者：
出处：http://itindex.net/relian
运行时优化
1、使用v-if代替v-show
两者的区别是：v-if不渲染DOM，v-show会预渲染DOM
除以下情况使用v-show，其他情况尽量使用v-if
有预渲染需求
需要频繁切换显示状态
2、v-for必须加上key，并避免同时使用v-if
一般我们在两种常见的情况下会倾向于这样做:
为了过滤一个列表中的项目
比如 v-for="user in users" v-if="user.isActive"。在这种情形下，请将 users替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表
为了避免渲染本应该被隐藏的列表
比如 v-for="user in users" v-if="shouldShowUsers"。这种情形下，请将 v-if 移动至容器元素上 (比如 ul, ol)
3、事件及时销毁
Vue组件销毁时，会自动清理它与其它实例的连接，解绑它的全部指令及事件监听器，但是仅限于组件本身的事件。
也就是说，在js内使用addEventListener等方式是不会自动销毁的，我们需要在组件销毁时手动移除这些事件的监听，以免造成内存泄露，如：
created() {
addEventListener('touchmove', this.touchmove, false)
},
beforeDestroy() {
removeEventListener('touchmove', this.touchmove, false)
} 首屏优化
1、图片裁剪、使用webp
- 图片需要裁剪，一般使用二倍图即可
- 尽量使用webp图片
- 如果使用了vue-lazyload插件，可以使用以下方法一键替换webp（替换使用v-lazy指令的图片）
Vue.use(VueLazyload, {
error: require('./assets/img/defaultpic_small.png'),
filter: {
webp (listener: any, options: any) {
if (!options.supportWebp) return
// listener.src += '.webp'
}
}
}); 2、资源提前请求
经测试，Vue项目中各文件的加载顺序为：router.js、main.js、App.vue、[-page-].vue、[component].vue，如图：
其中，router的加载时间相比于page.vue快近100ms，如果page.vue的文件较多，时间差异会更大
所以，可以在页面挂载、渲染的同时去请求接口数据，如在router.js中请求数据：
import Router from 'vue-router'
import store from './store'
store.dispatch('initAjax') 3、异步路由
使用异步路由可以根据URL自动加载所需页面的资源，并且不会造成页面阻塞，较适用于移动端页面
建议主页面直接import，非主页面使用异步路由
使用方式：
{
path: '/order',
component: () => import('./views/order.vue')
} 4、异步组件
不需要首屏加载的组件都使用异步组件的方式来加载（如多tab），包括需要触发条件的动作也使用异步组件（如弹窗）
使用方式为：v-if来控制显示时机，引入组件的Promise即可
<template>
<div>
<HellowWorld v-if="showHello" />
</div>
</template>
<script>
export default {
components: { HellowWorld: () => import('../components/HelloWorld.vue') },
data() {
return {
showHello: false
}
},
methods: {
initAsync() {
addEventListener('scroll', (e) => {
if (scrollY > 100) {
this.showHello = true
}
})
}
}
}
</script> 5、使用轻量级插件、异步插件
使用webpack-bundle-analyzer查看项目所有包的体积大小，较大的插件包尽量寻找轻量级的替代方案
首屏用不到的插件、或只在特定场景才会用到的插件使用异步加载（如定位插件，部分情况可以通过URL传递经纬度；或生成画报插件，需要在点击时触发）；插件第一次加载后缓存在本地，使用方式为：
// 以定位插件为例
const latitude = getUrlParam('latitude')
const longitude = getUrlParam('longitude')
// 如果没有经纬度参数，则使用定位插件来获取经纬度
if (!latitude || !longitude) {
// 首次加载定位插件
// webpack4写法，若使用webpack3及以下，则await import('locationPlugin')即可
if (!this.WhereAmI) this.WhereAmI = (await import('locationPlugin')).default
// do sth...
} 6、公用CDN
使用公用的CDN资源，可以起到缓存作用，并减少打包体积
网络优化
1、减少网络请求
浏览器对同一时间针对同一域名下的请求有一定数量限制（一般是6个），超过限制数目的请求会被阻塞
首屏尽可能减少同域名的请求，包括接口和js；按需减少首屏的chunk.js，合并接口请求
2、合理使用preload、dns-prefetch、prefetch
- preload具有较高的加载优先级，它可以利用间隙时间预加载资源，将加载和执行分离开，不阻塞渲染和document的onload事件
- 每次与域名连接都需要进行DNS解析，使用dns-prefetch可以预解析域名的DNS
- prefetch会预加载页面将来可能用到的一些资源，优先级较低；对首屏渲染要求较高的项目不建议使用
三者的使用方式，在head标签中添加（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 nofollow" />
<!-- dns-prefetch写法 -->
<link rel="dns-prefetch" href="//www.dpfile.com" rel="external nofollow" />
<title>md-config</title>
<!-- preload写法，as属性必须 -->
<link href="/dist/css/app.52dd885e.css" rel="external nofollow" rel="preload" as="style" />
<link href="/dist/js/app.05faf3b5.js" rel="external nofollow" rel="preload" as="script" />
<link href="/dist/js/chunk-vendors.04343b1f.js" rel="external nofollow" rel="external nofollow" rel="preload" as="script" />
<!-- prefetch写法 -->
<link href="/dist/js/chunk-vendors.04343b1f.js" rel="external nofollow" rel="external nofollow" rel="prefetch" />
</head> 3、PWA
PWA支持缓存HTML文档、接口（get）等，降低页面白屏时间
这样即使在弱网甚至断网情况下，也能迅速展示出页面
编译打包优化
1、升级Vue-Cli-3
vue-cli-3采用webpack4+babel7，对编译打包方面做了很多优化（成倍的提升），使用yarn作为包管理工具，并且对很多优化的最佳实践做了默认配置
经测试，将项目从vue-cli-2迁移到vue-cli-3之后，速度变化为：
编译时间：44s --> 7s
打包时间：55s --> 11s
效率提升非常明显
2、SSR
对加载性能要求较高的项目建议升级SSR
最后
为了帮助大家让学习变得轻松、高效，给大家免费分享一大批资料，帮助大家在成为全栈工程师，乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈： 866109386.欢迎大家进群交流讨论，学习交流，共同进步。
当真正开始学习的时候难免不知道从哪入手，导致效率低下影响继续学习的信心。
但最重要的是不知道哪些技术需要重点掌握，学习时频繁踩坑，最终浪费大量时间，所以有有效资源还是很有必要的。
最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们，祝福大家在往后的工作与面试中一切顺利。
相关 [优化 vue 项目] 推荐：
vue项目你一定会用到的性能优化！
- - 掘金 前端提起 性能优化 很多人眼前浮现的面试经验是不是历历在目呢. 反正，性能优化在我看来他永远是前端领域的 热度之王. 而本渣最近维护的项目恰巧在这个方向下了很大功夫，一些经验之谈奉上，希望对大家有些许帮助. 既然说性能优化，那他总得有一个公认的标准，这就是我们很多次听到的 Lighthouse. 在很多单位，都有着自己的性能监控平台，我们只需要引入相应的sdk，那么在平台上就能分析出你页面的存在的性能问题，大家是不是学的很神奇.
浅谈Vue组件在实际项目中的应用
- - JDC | 京东设计中心Vue.js 是一套构建用户界面的渐进式框架，目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 虽然目前 Vue 已经很火了，但不可否认的是，仍有很多人刚刚开始学习使用 Vue 来构建前端项目，从生疏的初学者到熟练运用 Vue 的过程中，不可避免地会走一些弯路. 为了实现某个功能，也许尝试过很多方法，最终蓦然回首，才发现当初犯下的错误是那么幼稚.
超详细！4小时开发一个SpringBoot+vue前后端分离博客项目！！
- - 掘金后端项目代码： github.com/MarkerHub/v…. 项目视频： www.bilibili.com/video/BV1PQ…. 文章总体分为2大部分，Java后端接口和vue前端页面，比较长，因为不想分开发布，真正想你4小时学会，哈哈. 从零开始搭建一个项目骨架，最好选择合适，熟悉的技术，并且在未来易拓展，适合微服务化体系等.
ssr vuejs/vue-hackernews-2.0: HackerNews clone built with Vue 2.0, vue-router & vuex, with server-side rendering
- -This is a demo primarily aimed at explaining how to build a server-side rendered Vue app, as a companion to our SSR documentation. #install dependenciesnpm install#or yarn#serve in dev mode, with hot reload at localhost:8080npm run dev#build for productionnpm run build#serve in production modenpm start.
PHP项目性能优化
- - SegmentFault 最新的文章PHP项目性能优化的三个层次. PHP周边（服务器，数据库，webserver). 尽量使用PHP原生函数和常量，类. 如果要实现的功能有原生PHP函数，则不要自己用PHP实现. 尽量使用性能更高的内置函数. 比如isset和array_key_exists都可以使用，则使用isset. 尽量不要使用错误抑制符@.
Vue 移动端框架
- - IT瘾-jianshuvonic 一个基于 vue.js 和 ionic 样式的 UI 框架，用于快速构建移动端单页应用，很简约. 中文文档| github地址| 在线预览. vux 基于WeUI和Vue(2.x)开发的移动端UI组件库. 基于webpack+vue-loader+vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式.
vue路由权限校验
- - 掘金前端做后台系统的时候，难免会有用户权限的判断. admin可以查看全部菜单，user只能查看部分菜单. 一开始接触这个需求的时候，完全是纯前端做的. 在配置路由的时候，加一个roles的属性，通过判断用户的roles是否与路由的roles属性相匹配来作为显示隐藏的依据. // 过滤路由 menuList-菜单 roles-用户角色
const checkMenuList = (menuList, roles) => {
for (let i = 0; i < menuList.length; i++) {.
优化 RequireJS 项目（合并与压缩）
- - 博客 - 伯乐在线英文原文： Optimize (Concatenate and Minify) RequireJS Projects，编译： oschina. 本文将演示如何合并与压缩一个基于RequireJS的项目. 本文中将用到苦干个工具，这其中就包括 Node.js. 因此，如果你手头上还没有Node.js可以 点击此处下载一个.
项目性能优化经验--ZY（三）
- - 行业应用 - ITeye博客读写分离，不是想做就做的，说分就分的，随便找个中间件把请求一转发就OK的. 比如，在项目中有个模块是购物车（现在的电子商务一般都需要存储购物车内容，因为存在PC,MOBILE等不同的终端），客户先点击添加购物车，然后结算（这时候会做个判断购物车是否有商品），在大并发情况下，mysql的读库和写库的同步（beanlog）严重的delay，导致购物车一直判断为空，订单无法下.