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已停服，官方文档一般会标记能用的cdn资源）

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

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

缩小了vender包的大小，虽然增加了请求数量，但是提高了加载效率。
如有好的方案，欢迎留言讨论