vue优化（打包、编译）

关于vue打包和编译速度，在小型项目中可能体现的不明显，但是在中大型项目中，这是一个硬伤，会大大的降低开发速率。今天得空，就把我以前开发过程中总结的经验分享一下，其实也是自己结合前人的一些经验总结的。

打包优化

1.config/index.js

     屏蔽sourceMap 和 对项目代码中的JS/CSS/SVG(*.ico)文件进行gzip压缩

build: {
    ...
    productionSourceMap: false, // 屏蔽sourceMap
    productionGzip: true,// 启用压缩插件
    productionGzipExtensions: ['js', 'css','svg'],// 顶压缩文件的类型
    ...

  }

启用压缩功能前提是需要webpack的支持，安装压缩插件： npm install --save-dev compression-webpack-plugin

    1).gzip会对js、css文件进行压缩处理，对于svg，ico文件以及bmp文件压缩效果达到50%

    2).对于图片进行压缩问题，png，jpg，jpeg没有压缩效果

    3).对项目文件进行压缩之后，需要浏览器客户端支持gzip以及后端支持gzip。

 2.对路由组件进行懒加载:

    当项目比较大，加载的资源比较多时，会出现首次加载白屏现象。因此需要对路由或者组件进行懒加载，用到他们的时候才加载，而不是一进入就加载所有。

    {
      path: "/home",
      component: resolve=>require(["@/home"],resolve)
    },

3.优化代码：

     1）.数据列表渲染时时刻记住定义key值，以便vue内部diff算法能精确定位

     2）.v-show和v-if的合理使用，对于切换频率高的数据用v-show,其他的用v-if,减少系统的切换开销

     3）.尽可能的细分组件，在项目开发过程之中，第一版本把所有的组件的布局写在一个组件中，当数据变更时，由于组件代码比较庞大，vuejs的数据驱动视图更新比较慢，造成渲染比较慢。造成比较差的体验效果。所以把组件细分，比如一个组件，可以把整个组件细分成轮播组件、列表组件、分页组件等。

     4）.减少watch的数据，

当组件某个数据变更后需要对应的state进行变更，就需要对另外的组件进行state进行变更。可以使用watch监听相应的数据变更并绑定事件。当watch的数据比较小，性能消耗不明显。当数据变大，系统会出现卡顿，所以减少watch的数据。其它不同组件的state双向绑定，可以采用事件中央总线或者vuex进行数据的变更操作。

    5）.图片懒加载，对于内容类系统的图片按需加载，如果出现图片加载比较多，可以先使用v-lazy之类的懒加载库或者绑定鼠标的scroll事件，滚动到可视区域先再对数据进行加载显示，减少系统加载的数据。

    6）.服务端渲染（可以查看官网vue ssr 指南）

4.优化用户体验

    1）.keep-alive使用，优化路由，减少请求次数

     2）.better-click防止iphone点击延迟,手指触摸时会出现300ms的延迟效果，可以采用better-click对ipone系列的兼容体验优化

编译优化

     在项目开发中，组件内容的改变，视图会进行实时的编译渲染（热重载），在大型项目开发中，有时候编译一次需要几十秒或者更多的时间，大大的降低了开发效率。下面贴一下，编译优化的方法：