vue项目优化方案

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

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

一、权限角度：涉及权限相关角度使用v-if，不涉及权限且需拼房切换使用v-show;
    二、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包的大小，虽然增长了请求数量，可是提升了加载效率。