Vue项目性能优化篇

Vue项目性能优化是个老生常谈的问题了，本人开发过程中也查过很多关于Vue项目优化的文章，每篇文章说的都差不多，本章我就结合我的心得和大家的智慧做一个总结。

1.懒加载

懒加载应该是提高性能的最简单有效的方式了，一个项目加上懒加载速度和逼格都会上一个台阶。懒加载的意义在于按需加载，不会让项目刚开始运行速度就很慢，能大大的优化用户体验。Vue项目懒加载分为图片懒加载和路由懒加载，具体写法如下：

（1）路由懒加载

{
  path: '/home',
  name: 'home',
  component: resolve => require(['@/components/home'],resolve)
},{
  path: '/index',
  name: 'Index',
  component: resolve => require(['@/components/index'],resolve)
},{
  path: '/about',
  name: 'about',
  component: resolve => require(['@/components/about'],resolve)
} 

（2）图片懒加载

<!--使用前需先安装配置vue-lazyload-->
<a href="javascript:;"><img v-lazy="'/static/img/abc.jpg'"></a>

2.代码优化

代码优化是一个项目优化的核心，不仅能提高项目质量和用户体验，同时还能让项目更容易维护，代码优化主要有一下几个方面：

（1）功能重复组件和函数封装，提高代码复用率

组件封装这点非常重要，但是也常常被人忽略，之所以这么说是因为组件封装不仅能提高开发效率，还能减少以后维护成本。例如；一些级别比较高的程序员会在开发之前设计好一些常用组件库，现成的（东北话）组件会让其他人大大增加开发效率、如果需要修改和优化只需要修改一处就好，不至于牵一发而动全身。中等程序员则是在开发过程中把重复组件提出来进行组件封装；那最低级程序员则是根本没有这方面的意识。如何提高组件封装的意识才是解决的根本所在。

（2）尽量减少本地存储的使用

尽量减少本地存储（localStorage、sessionStorage、cookie）的使用也是提高性能的方式之一，有些小伙伴喜欢用本地存储传参，传参的方式有很多种，比如：路由传参或者vuex等

（3）减少watch使用 v-if和v-show使用要有原则

watch监听大量状态时会让浏览器出现卡顿现象，所以尽量减少使用。v-if和v-show的区别是；v-if是不渲染，而v-show是渲染不显示，至于如何使用视情况而定

3.用户体验优化

（1）添加Loading

当用户需要等待时间较长时，必须添加等待loading，这个不多说，用处大大地

（2）路由逻辑

路由逻辑是一个项目的核心，如果路由逻辑不通的话，用户很有可能点返回按钮的时候一直在两个页面之间跳转，进入死循环。其次，路由逻辑和用户体验息息相关，比如用户下完单应该跳转到订单详情页，而不是首页等等

（3）样式统一

两个页面的相同功能按钮，它的大小颜色如果不用的话就会让人感觉你的App不够专业

（4）滚动组件的使用

网页的原声滚动用户体验不好，我们需要使用一些滚动组件，比如：better-scroll、iscroller、scroller等，滚动组件的使用能让页面滚动更自然，逼格更高

4.webpack打包优化

（1）减去控制台打印和备注

npm install uglifyjs-webpack-plugin -D

 
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production';
 
  configureWebpack: config => {
    const plugins = [];
    if (isProduction) {
      plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            output: {
              comments: false,
            },
            warnings: false,
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log']
            }
          }
        })
      )
    }

（2）图片压缩

npm install image-webpack-loader -D

//vue.config.js
 
module.exports = {
  // 根据你的实际情况更改这里
  publicPath,
  assetsDir: 'assets',
  lintOnSave: true,
  // image 压缩 定义在chainWebpack中
 chainWebpack: config => {
   config.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
        bypassOnDebug: true
      })
      .end()}

 （3）GZIP 源码压缩

  GZIP教程传送门

5.CDN加速 

 好处：

1.减少包体积

2.能让静态资源加载更快

3.较少首屏渲染时间

4.总结：CDN能让你的项目变快，配合GZIP使用效果更佳。具体教程可以搜索详细的 这里就不赘述了

好了，以上就是总结的Vue项目优化的相关内容，欢迎留言点评