乐趣区

vue项目优化方案

适用对象:vue-cli 初始化的项目或 webpack 打包的项目。

基础优化:
A、template
•语义化标签,避免乱嵌套,合理命名属性
•v-show 和 v -if

    1、权限角度:涉及权限相关角度使用 v -if,不涉及权限且需拼房切换使用 v -show;
    2、dom 总数:减少 dom 总量,加快首屏渲染,倾向于 v -if;

•模板里不宜有过多的表达式或判断,适当的在 methods 和 computed 里封装成方法,可以减少代码冗余,当然对于视觉强迫兽是友好的。
• 循环调用子组件时添加 key,需要保证 key 的唯一性,一般不采用 item,可以使用 item.id 或 index;
B、style
•局部样式代码按模块划分,建议 <style scoped> 锁住,避免多人开发冲突的麻烦,命名规则尽量简短。
•全局样式文件尽量抽象通用,建议复写组件库如 element 的代码放到全局中。
•尽量不用 float 布局,可以采用 flex 兼容。
C、script
•多人开发时,尽量保证多个组件内钩子函数顺序一致,建议按 vue 生命周期排序,方便查找和理解,能很好的应对多种需求。
•data 里初始化数据的结构尽量详细,命名清晰,简单易懂,避免无用的变量。需要区分状态的变量尽量采用布尔值,通过三目运算来实现状态区分。
•props 父子组件传值时尽量细化,减少所传值之间的关联,并在子组件 props 里加数据类型、是否必传及默认值,方便错误排查,让传值更严谨。
•methods 里方法有必要简单,只做一件事。方法复用率较高的,可以封装一个工具文件 utis.js。
•watch 和 computed 的使用情景:computed 主要做 filter 切换,切忌加调用方法(没遇见过,未知后果);watch 的作用是数据监听回调。

组件优化:
规模较大的项目组件细分越细越好,代码布局模块化;可以采用第三方组件库,迫不得已,再去写自定义组件。
自定义组件要注意:

 •组件功能性明确,所处理的业务尽量通用,提高组件复用率;•封装组件 props 里的参数必须细化全面,保证多种类似需求的覆盖;•组件代码可以按功能划分模块,使项目清晰明了。

Vue-router 和 vuex 优化:

Vue-router:
 •组件懒加载:结合 vue 异步组件和 webpack 的代码分割实现路由按需加载,可以提高首页加载效率。案例如下: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')

 •动态路由:router.addRoutes(routes) 方法
    方案:https://blog.csdn.net/s8460049/article/details/61190709/

vuex:

 •项目规模比较大,状态树下字段比较多时,建议状态模块化(官网模块化方案);•vuex 的完整流程:store.dispatch('action') -> action -> commit -> mutation -> getter -> computed;建议无论项目大小,跑完整个流程,可以根据流程划分三部分:state、action、mutation 三个文件,各自处理流程功能,前端工程化可以添加 mutationType 处理常量。这样保留了 vuex 的灵活性,也保证了代码的统一性,方便维护。

打包优化:
解决 vender 包打包特别大的问题:
•打包 vender 时不打包 vue、vuex、vue-router、axios 等,使用国内的 cdn 服务直接引入到 index.html 中,

 bootcdn 已停服 

•在 webpack 中设置 externals,忽略不需要打包的库:

 externals: {
   'vue': 'Vue',
   'vue-router': 'VueRouter',
   'vuex': 'Vuex',
   'axios': 'axios'
 }

缩小了 vender 包的大小,虽然增加了请求数量,但是提高了加载效率。

退出移动版