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不会将对应数据转化成观察者，能够提升渲染速度