vue项目性能优化-总结

  Vue 框架通过数据双向绑定和虚拟 DOM 技术，帮我们处理了前端开发中最脏最累的 DOM 操作部分， 
  我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 项目中仍然存在项目首屏优化、
  Webpack 编译配置优化等问题，所以我们仍然需要去关注 Vue 项目性能方面的优化，
  使项目具有更高效的性能、更好的用户体验。

一、基础优化（代码以及编码规范）

1、v-if 和 v-for区分使用场景

• v-if=false时不渲染DOM，v-show会预渲染DOM，注意区分使用
• v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
• v-for 遍历必须为 item 添加 key
• 在列表数据进行遍历渲染时，需要为每一项 item 设置唯一 key 值，方便 Vue.js 内部机制精准找到该条列表数据。当 state 更新时，新的状态值和旧的状态值对比，较快地定位到 diff 。
• v-for 遍历避免同时使用 v-if
• v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成 computed 属性

小小举例：

<template>
  <div class="home">
    <ul>
      <li
        v-for="user in activeUsers"
        :key="user.id">
        {
     {
      user.name }}
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
     
  data(){
     
    return {
     
      users:[{
     id:1,name:'zhangsan',isActive:true},{
     id:2,name:'lisi',isActive:true},{
     id:3,name:'wangwu',isActive:false},{
     id:4,name:'maliu',isActive:true},]
    }
  },
  computed: {
     
    activeUsers: function () {
     
      return this.users.filter(function (user) {
     
          return user.isActive
      })
    }
  }
}
</script>

2、computed 和 watch 区分使用场景

• computed：是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；
• watch：更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作

运用场景：

   1.  当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，
因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；

   2.当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，
 使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，
 限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。
 这些都是计算属性无法做到的。

3、在使用 npm run build 打包时 移除console

    随着项目功能的不断完善 代码的累积 项目中的庞大代码数量
    造成我们打包时的长时间等待 尤其是我们在开发阶段留下的过多的测试代码
    例如最常见不过的console 消耗我们的时间 并且占有一定的内存

(1)、使用 babel中 的一个插件，因为webpack 打包时会使用 babel 进行代码降级，所以babel 插件可以在打包过程中将 console 移除

      安装插件
      
      npm install babel-plugin-transform-remove-console --save-dev

(2)、配置babel.config文件

const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
     
  prodPlugins.push('transform-remove-console')
}
module.exports = {
     
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: ['transform-remove-console']
}

这样配置后 再次打包 包中就没有console了
问题：当运行npm run serve时 也会删除console 但是开发阶段我们需要
改善babel.config文件：

现在 只有在打包时会删除console

3、改善入口文件

    项目中的默认入口文件时main.js文件 不管是打包 还是开发阶段使用的都是这一文件
    在卡法阶段我们可能调用一端口返回假数据 为调试我们的代码 但是在上线后我们需要用正式接口 
  可能不止一个          
    但是我们左右手动更改较为麻烦 且容易出错

比如：

(1).创建两个入口文件：

• 一个用于开发环境的打包 dev_env.js
• 一个用于项目上线的打包 prod_env.js

(2)、配置打包的入口文件

module.exports={
     
    chainWebpack:config=>{
     
        config.when(process.env.NODE_ENV === 'production',config=>{
     
            config.entry('app').clear().add('./src/prod_env.js')
        })
        config.when(process.env.NODE_ENV === 'development',config=>{
     
            config.entry('app').clear().add('./src/dev_env.js')
        })
    }
}

开发时，使用 npm run serve 命令，NODE_ENV 的值就是 developmnent ,所以会将 dev.env.js 作为入口文件

部署时，使用 npm run build 命令，NODE_ENV 的值就是 production，所以会将 prod_evn.js 作为入口文件

4、改善打包时包的体积大小

通常情况下 项目中通过import方式引入的包 会将整个包下载到客户端	这可能会导致程序的加载速度非常慢

使用CDN

 将线上环境中用到一些依赖，比如 vue、vueRouter 、axios 等，
 使用 cdn 节点的方式引用，而不是打到包里去

 此项目中 将项目上线后仍然需要用到的一些依赖包从prod_evn.js文件中删然后在 public/index.html 中使用 cdn 节点引用

首先修改我们上线时的入口文件

然后在 public/index.html 中加入如下引用

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.core.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.bubble.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/theme-chalk/index.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.min.js"></script>
    <script type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-quill-editor.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js"></script>

最后在 vue.config.js 中添加配置

打包后 包的体积明显减小