Vue 项目性能优化

最近一直在转发更新，许久没有整理自己的总结了，今天忙里偷闲，整理一下目前出于主流的 VUE !

Vue 框架通过双向数据绑定和虚拟 DOM 技术，进行数据渲染，DOM 操作等；没有完美的技术，我们能做的就是尽可能的去完善它，因此我整理了目前遇到的可优化的以及观摩别人的文档做的笔记，在此整合，不足之处，多多指教！

 

代码包的优化

1、屏蔽 sourceMap

     项目开发完成，进行打包准备上线时，需要对项目开发中的各种提示信息进行屏蔽，一是可以减少代码包的大小，二是为了保证安全性，使用 vue-cli 脚手架会默认是允许 sourceMap 打包，所以需在配置文件中将 productionSourceMap 改为 false

2、对项目中的 JS/CSS/IMG 文件进行 gzip 压缩

     在vue-cli脚手架的配置信息中，有对代码进行压缩的配置项，productionGzip设置为true

3、对路由组件进行懒加载

      在路由配置文件里，如果使用同步的方式加载组件，在首屏加载时会对网络资源加载加载比较多，资源比较大，加载速度比较慢。所以设置路由懒加载，按需加载会加速首屏渲染。但是进行懒加载之后，实现按需加载，那么项目打包不会把所有js打包进app.[hash].js里面，优点是可以减少app.[hash].js体积，缺点就是会把其它js分开打包，造成多个js文件，会有多次https请求。如果项目比较大，需要注意懒加载的效果。

 

 

关于代码的那些事

1、v-if  与 v-show

      v-show 会预渲染DOM，所以除需要预先渲染或者频繁切换显示效果，都尽量使用 v-if

      v-if 是真正的条件渲染，它可以保证在事件切换中当前条件内的事件监听器和子组件适当的被销毁和重建；

      v-if 如果在初始化时候为false，那它则不会执行当前代码，直至条件为true，所以渲染（初始化）较快

2、v-for

      v-for 使用时一定记得写 key ，此时已使用 v-for 避免使用 v-if

3、细分 vuejs 组件

      在项目开发过程中，一般是把所有的功能写在一个组件中，当数据变更时，由于组件代码较大，数据渲染视图变慢。所以需把组件细分，比如一个组件可细分成轮播组件、列表组件、分页组件等等。

4、computed 和 watch 

      computed 是计算属性，同时存在缓存，所以只有他依赖的属性值发生变化，下一次获取 computed 的值后才会重新计算。所以在需要做数据计算同时也要依赖其他数据时，可使用 computed（利用其缓存属性，避免多次重新计算）

      watch 做观察用，类似监听回调，每当监听的数据出现变化都会执行回调及其后的函数操作。当组件某个数据变更后需要对应的 state 进行变更、需要异步处理数据或者开销较大时，会使用 watch 监听相应的数据变更并绑定事件。当 watch 的数据较小时，性能消耗不明显，但当数据较大，系统会出现卡顿现象。所以如需要可采用事件中央总线或者 vuex 进行数据的操作变更

5、图片的按需加载、长列表的性能优化

      尽量对图片进行按需加载，如果图片过多，可以使用 v-lazy 之类的懒加载库或者 scroll 事件等

      如图片需要裁减，一般使用二倍图即可

      Vue 会通过 Obj.defineProperty 对数据进行劫持，便于实现数据渲染视图。但在仅需要数据展示而不操作时，是不需要 Vue 的数据劫持的（数据量较大，利于减少初始化时间），此时推荐使用 Obj.freeze 来冻结一个对象，被冻结的对象是不能修改的

      如果项目中存在非常长或者无限滚动的列表，可使用 窗口化 来优化项目性能，可参考开源项目，如： vue-virtual-scroll-list、vue-virtual-scroller

6、资源提前请求

      vue 项目中各个文件的加载顺序为 router.js   main.js   App.vue   [-page-].vue   [compontent].vue 

      如果 [-page-].vue 的文件较多，可以在页面挂载、渲染的同时去请求数据接口

7、异步路由、路由懒加载

      建议主页面直接 import ，其他非主页面使用异步路由

      使用异步路由可以根据 URL 自动加载所需页面的资源，并不会造成页面阻塞，更适用于移动端

      因为 Vue 为单页面应用，所以会大量使用 import 引入路由，这样在 webpack 打包后文件会很大，比如首页很可能出现白屏情况，此时就需要根据不同路由对应的组件分割成不同的代码块，然后当路由被访问时才加载对应的组件，会提高效率（此方式虽然可能减少首页白屏的时间，但可能会是个别页面的访问效率降低），建议考虑实际情况

      例如：

                  const Foo = () => import('./Foo.vue')

      const router = new VueRouter({

           routes: [

              { path: '/foo', component: Foo }

           ]

      })

8、异步组件

      不需要首屏加载的组件建议都使用异步组件的方式加载，包括要触发条件的动作也使用异步组件，如弹框等

      使用 v-if 来控制显示时机，再引入组件的 Promise 即可

9、SSR--服务端渲染

      如果项目较大，首屏无论如何优化都会出现黑屏或者闪屏的话，建议考虑使用 SSR 

10、事件的销毁

        Vue组件销毁时，会自动清理它与其它实例的连接，解绑它的全部指令及事件监听器，但是仅限于组件本身的事件。
也就是说，在js内使用addEventListener等方式是不会自动销毁的，我们需要在组件销毁时手动移除这些事件的监听，以免造成内存泄露

11、第三方插件的按需引入

       开发中我们经常需要引入第三方插件，一般我们不会需要整个插件的全部功能，如果直接引入整个插件会导致项目的体积过大，所以可使用 babel-plugin-component ，只引入需要的组件，减少整个项目的体积

       例如：以 element-ui 为例

                  1）安装 babel-plugin-component ：npm install babel-plugin-component -D

                  2）修改  .babelrc 

        { "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ]}

                  3）在 main.js 中引入部分组件：

                        import Vue from 'vue'

                        import {Buttom,Select} from 'element-ui'

                        Vue.use(Button)

                        Vue.use(Select)

12、服务端渲染 SSR 、预渲染

 

       服务端渲染是指 Vue 在客户端将标签渲染成的整个 HTML 片段的工作在服务端完成，服务端形成的 html 片段直接返回给客户端的过程叫做服务端渲染                

 

未完待续。。。