vue优化总结

一、vue页面优化

1、路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。 官方地址

component: () => import('@/views/')

2、组件懒加载

  const name=()=>import('@/XX.vue');

3、图片懒加载

也就是图片按需加载（产生原因：图片的加载是同步的，若图片数据过大，加载时会阻塞浏览器继续向下解析，用户体验非常差。）

//1.CDN引用vue-lazyload

//2.main.js中
Vue.use(VueLazyload)
//说明：若页面出现图片抖动的情况，则需设置默认图片(loading) ,加载错误的图片（error）
Vue.use(VueLazyload,{
  error: require('./assets/img/XX.png'),
  loading: require('./assets/img/XX.png')
});
//3.page中使用

data:imgmtbd:require('../assets/img/imgmtbd.png')

4、V-IF和V-SHOW的区别使用

v-if判断是否加载，可以减轻服务器的压力，在需要时加载,但有更高的切换开销;v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

5、禁用行内样式

6、提取公共代码

（1）方法：路由跳转、公共请求、请求同一个接口、过滤器、正则表达式、公共调用插件的相关方法等等
（2）组件：轮播图、区域选择、分页、时间弹窗、二维码分享弹窗、新闻列表栏目、公共模块等等

7、npm包改成cdn引用

注意：官网中提供的cdn不太稳定，建议下载下来放置到公司提供的cdn上面

//index.html

//vue页面使用
swal("确定",buttons:{确定});

8、computed和watch区分

computed：
1、支持缓存，只有依赖数据发生改变，才会重新进行计算；
2、不支持异步，当computed内有异步操作时无效，无法监听数据的变化；
使用场景：分页中需要实时展示几栏分页数据；
watch：
1、不支持缓存，数据变，直接会触发相应的操作；
2、watch支持异步；
3、监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
使用场景：监听路由变化；

9、v-for避免同时使用v-if

v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成 computed 属性

使用filter，v-for="el in modularName.filter(obj=>{})"
若只使用一次可用computed

10、减少页面接口请求个数

一般web网页会有多个请求，阔以相应减少请求个数，减少页面加载时间

11、减少data中非必要参数个数

一些公共的参数阔以在app.vue中定义，采用vue挂载到window下面

data:function(){
    return{
      routeDefine:''//公共动态参数
      }
}，
initConfig() {
      window.Vue = this;//将vue挂载到window下面
 },
created(){
    this.routeDefine=this.$route.params.define;
}

12、第三方插件按需引入

13、v-for中，设置唯一key值

加快页面加载速度

二、webpack优化

1、GZIP压缩

1.config-index.js
productionGzip：true
2.安装依赖compression-webpack-plugin：
npm install --save-dev [email protected]
3.nginx 服务端修改http配置：
http:{ 
      gzip on; 
      gzip_static on;
      gzip_buffers 4 16k;
      gzip_comp_level 5;
      gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg 
        image/gif image/png;
}

2、webpack压缩图片
压缩命令：cnpm install image-webpack-loader --save-dev
3、优化webpack打包

参考来源：
vue中v-if与v-show的区别以及使用场景.
Vue中computed和watch的区别.