vue-cli3项目性能优化步骤
vue项目优化性能大致分为3种,代码包优化、源码优化、用户体验优化
# 1. 代码包优化
路由懒加载,打包时按组件打包模块。
js,css代码公用代码提取, 按需引入(cdn加载:externals)
js,css代码的最小化压缩和分割(splitchunks,UglifyJsPlugin,懒加载)
图片文件的压缩(image-webpack-loader)
gzip的压缩(compression-webpack-plugin)
屏蔽sourceMap,阻止.map文件的生成(.map文件:线上项目报错,根据.map文件来查找错误点)
# 2. 源码优化
减少第三方插件的使用,尽可能使用原生代码,比如不使用vuex,用new Vue实例来代替,自己封装format来代替moment等
减少请求次数(一次性获取数据,搜索功能可以交给前端等)
减少v-show的使用,因为v-show的bool值true还是false,页面渲染时都会加载到。
v-for添加key,方便vue diff的时候找到相应的vnode实例。
高度模块化组件(细分组件),减少组件过度庞大冗余,导致加载缓慢。
减少watch函数的使用,当监听的数据过度庞大时,造成vue视图更新缓慢,页面渲染缓慢。
静态资源按需加载,减少资源的请求次数。
SSR(服务器渲染):服务端返回模板,前端直接渲染页面,减少请求次数,节省性能消耗。(当项目过度庞大,首页加载时会出现黑屏或者shan闪屏的时候,可以考虑这个)。
# 3. 用户体验优化
better-click防止iphone点击延迟:在开发移动端vuejs项目时,手指触摸时会出现300ms的延迟效果,可以采用better-click对ipone系列的兼容体验优化。
加载loading:当数据获取延迟过长时,添加一个加载动画loading。
骨架屏加载:当首页数据过度庞大时,可以预加载dom布局。
离线缓存优化(registerServiceWorker):解决网络离线而访问不了页面问题。