vue项目优化方案

一、路由不少的复杂页面，路由懒加载

—使用const Foo = () => import('./Foo.vue')代替import './Foo.vue'；

二、外部库有提供按需加载的功能，能够按照官方文档的作法来按需加载

三、开启Gzip压缩

四、页面渲染优化（减小重排），组件优化、基础优化（js、css），图片优化

—vue官网中的规范须要遵循；

—按模块划分路由。按照业务模块划分路由及子路由，按照功能或交互稿或视觉稿划分组件模块；

—提取共用的方法、共用的样式、共用的状态；

—使用字体图标代替纯色或渐变色的图标，如使用icomoon；

—图片懒加载--到可视区域再加载；

—v-if，v-show的选择。权限相关使用v-if、频繁切换使用v-show、不频繁切换使用v-if；

—style中使用<style scoped>避免冲突，全局style尽可能抽象，提升复用率，减少css文件大小，节省带宽；

—根据页面复杂度，删除部分页面生命周期created中的window.setTimeout方法；

五、网络请求优化

—一般会选择对 http 请求的方法进行二次封装，以便增长统一的拦截器，或者统一处理阻止重复提交之类的逻辑；

—合理使用vuex，频繁切换的页面组件好比多个编辑页面，保存多个数据store，减小http请求；

六、合理使用缓存

—合理设置HTTP缓存。从图1 浏览器请求处理流程图中能够看出，恰当的缓存设置能够大大减小HTTP请求，节省带宽。

如不多变化的资源（html、css、js、图片等）经过 HTTP Header中的cache-control和Expires可设定浏览器缓存，变化不频繁又可能变的资源使用Last-Modifed来作请求验证；

 

七、打包优化

—webpack提供的externals能够配合外部资源CDN轻松大幅度减小打包体积，适用于echarts、jQuery、lodash这种暴露了一个全局变量的库；

—生产环境采用webpack-parallel-uglify-plugin，进行压缩；