前言
vue 之火, 不言而喻, 框架给前端带来了方便, 但是代码的漏洞也会很多. 如果不加以注意和优化就会陷入不必要的性能, 冗余等问题, 所以我们有必要关注优化的重要性, 下面我们将把常用的优化做一些总结和探索 我们将从以下几方面着手
优化方向
最佳实践
一, 代码优化方向
技术选型没有最好的, 只有最适合业务的. 目前我们的业务是用 gulp+webpack 打包构建的. 目前有几个痛点:
1, 代码冗余.
我们经常引入了一个大的 utils 库, 实际上只是引用了这个库中的一个方法, 但是却打包了整个库, 代码的冗余和浪费. 随着引入的文件越来越多, 这种问题也会变得越来越明显. 无论是基于代码洁癖, 还是代码体积来看, 都有优化的必要.
2, 异步流程控制.
随着 JS 前端的发展, 我们站着大牛的肩膀上, 逐步摆脱了回调地狱, 以及各种异步流程的坑. 有着目前来看最好的异步流程解决方案async/await 方案.Node 7.6 版本已经正式支持了此特性, Browser 端也可以统一, 达到前后端同构的目的. 清晰的异步流程控制对于团队代码的理解和维护都有着积极的意义.
3, 代码洁癖的考虑.
引入箭头函数, 简化代码. 利用箭头函数不绑定 this 的特性, 解决 this漂移问题.
二, 基础优化
所谓的基础优化是任何 web 项目都要做的, 并且是问题的根源. html,CSS,JS 是第一步要优化的点
分别对应到 .vue 文件内的,
<template>,<style>,<script>
, 下面逐个谈下 vue 项目里都有哪些值得优化的点
template
语义化标签, 避免乱嵌套, 合理命名属性等等标准推荐的东西就不谈了.
模板部分帮助我们展示结构化数据, vue 通过数据驱动视图, 主要注意一下几点
v-show,v-if 用哪个?
在我来看要分两个维度去思考问题:
第一个维度是权限问题, 只要涉及到权限相关的展示无疑要用 v-if*
第二个维度在没有权限限制下根据用户点击的频次选择, 频繁切换的使用 v-show, 不频繁切换的使用 v-if
这里要说的优化点在于减少页面中 dom 总数, 我比较倾向于使用 v-if, 因为减少了 dom 数量, 加快首屏渲染, 至于性能方面我感觉肉眼看不出来切换的渲染过程, 也不会影响用户的体验.
不要在模板里面写过多的表达式与判断 v-if="isShow && isAdmin && (a || b)", 这种表达式虽说可以识别, 但是不是长久之计, 当看着不舒服时, 适当的写到 methods 和 computed 里面封装成一个方法, 这样的好处是方便我们在多处判断相同的表达式, 其他权限相同的元素再判断展示的时候调用同一个方法即可.
循环调用子组件时添加 key,key 可以唯一标识一个循环个体, 可以使用例如 http://item.id 作为 key, 假如数组数据是这样的 ['a' , 'b', 'c', 'a'], 使用 :key="item" 显然没有意义, 更好的办法就是在循环的时候 (item, index) in arr, 然后 :key="index" 来确保 key 的唯一性.
style
将样式文件放在 vue 文件内还是外? 讨论起来没有意义, 重点是按模块划分, 我的习惯是放在 vue 文件内部, 方便写代码是在同一个文件里跳转上下对照, 无论内外建议加上 <style scopeed> 将样式文件锁住, 目的很简单, 再好用的标准也避免不了多人开发的麻烦, 约定命名规则也可能会冲突, 锁定区域后尽量采用简短的命名规则, 不需要 .header-title__text 之类的 class, 直接 .title 搞定.
为了和上一条作区分, 说下全局的样式文件, 全局的样式文件, 尽量抽象化, 既然不在每一个组件里重复写, 就尽量通用, 这部分抽象做的越好说明你的样式文件体积越小, 复用率越高. 建议将复写组件库如 Element 样式的代码也放到全局中去.
不使用 float 布局, 之前看到很多人封装了 .fl -- float: left 到全局文件里去, 然后又要 .clear, 现在的浏览器还不至于弱到非要用 float 去兼容, 完全可以 flex,grid 兼容性一般, 功能其实 flex 布局都可以实现, float 会带来布局上的麻烦, 用过的都知道不相信解释坑了.
- const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
- const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')
- const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')
- externals: {
- 'vue': 'Vue',
- 'vue-router': 'VueRouter',
- 'vuex': 'Vuex',
- 'axios': 'axios'
- }
来源: https://juejin.im/post/5b7f7d886fb9a01a1e0203cb