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 包的大小，虽然增加了请求数量，但是提高了加载效率。