vue项目性能优化方法

大概有以下几点

路由组件按需加载

一般一个项目会有多个页面（路由），利用webpack的代码分割与vue的异步组件，将代码按路由做按需加载；可以大大提高首次打开速度，页面越多效果越明显

非页面一级功能组件拆分按需加载

在刚打开页面时有些功能是不需要的，比如点击后的弹窗；可以将这些功能做拆分，结合vue的异步组件与webpack的代码分割做按需加载

每个页面都需要加载的代码存入cdn

如vue.min.js、axios、vuex.js、vue-router.js等等

sourceMap相关代码不要打入js内

sourceMap文件如果打入js内会大大增加js文件大小

大的图片不要打成base64

大的图片打成base64会增加js文件大小

图片懒加载

不打成base64的图片做懒加载处理，减少首屏加载的内容，从而提高加载的速度；vue有现成的插件可以使用

静态资源存入cdn

可以在打包后利用脚本直接上传至cdn

vue-ssr

ssr在服务器性能足够的情况下可以加快首屏的渲染，并且对seo友好

vue文件的使用

在使用构建工具时，vue文件要使用不含compiler的，比含有compiler的小30%左右；npm默认加载的是不含compiler的，但存cdn的时候需要注意

代码书写相关

列表渲染添加key

key可以在vue做diff处理的时候快速找到可以复用的dom

函数式组件使用

函数式组件可以提高组件渲染效率，但是没有状态、生命周期

v-if与v-show的使用

v-if首次不需要显示时可以减少vue对响应模块的处理,但切换时比v-show要慢;频繁切换时用v-show

Object.freeze冻结不需要变更的内容

Object.freeze冻结data中对应的对象之后，vue不会将对应数据转化成观察者，可以提高渲染速度

组件细分

vue对比新旧vnode是组件级别的，细分组件可以在视图较小变动时提高性能