for 循环设置 key 值

在用 v-for 进行数据遍历渲染的时候，为每一项都设置唯一的 key 值，为了让 Vue 内部核心代码能更快地找到该条数据，当旧值和新值去对比的时候，可以更快的定位到 diff。

keep-alive

keep-alive 是 Vue 提供的一个比较抽象的组件，用来对组件进行缓存，从而节省性能。

按需引入

使用的一些第三方库可以通过按需引入的方式加载。避免引入不需要使用的部分，无端增加项目体积。比如在使用 element-ui 库的时候，可以只引入需要用到的组件。

代码优化

功能重复组件和函数封装，提高代码复用率
组件封装这点非常重要，之所以这么说是因为组件封装不仅能提高开发效率，还能减少以后维护成本。
尽量减少本地存储的使用
尽量减少本地存储（localStorage、sessionStorage、cookie）的使用也是提高性能的方式之一，有些喜欢用本地存储传参，传参的方式有很多种，比如：路由传参或者 vuex 等
减少 watch 使用 v-if 和v-show 使用要有原则 watch监听大量状态时会让浏览器出现卡顿现象，所以尽量减少使用。 v-if 和 v-show 的区别是； v-if 是不渲染，而 v-show 是渲染不显示，至于如何使用视情况而定。

懒加载

Vue 项目懒加载分为图片和路由懒加载，具体写法如下：

路由懒加载
{
  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)
}

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

用户体验优化

添加 Loading
用户需要等待时间较长时，必须添加等待 loading ，优化用户体验。
路由逻辑
路由逻辑是一个项目的核心，如果路由逻辑不通的话，用户很有可能点返回按钮的时候一直在两个页面之间跳转，进入死循环。其次，路由逻辑和用户体验息息相关，比如用户下完单应该跳转到订单详情页，而不是首页等等
样式统一
两个页面的相同功能按钮，它的大小颜色如果不用的话就会让人感觉你的 App 不够专业
滚动组件的使用
网页的原声滚动用户体验不好，我们需要使用一些滚动组件，比如：better-scroll、iscroller、scroller等，滚动组件的使用能让页面滚动更自然。

webpack打包优化

减去控制台打印和备注

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']
            }
          }
        })
      )
    }

图片压缩

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()}

CDN加速

1.减少包体积

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

3.较少首屏渲染时间

4.总结：CDN 能让你的项目变快，配合 GZIP 使用效果更佳

Vue项目性能优化