vue项目性能优化策略

参考博文：Vue 项目性能优化 — 实践指南

项目优化包括性能和体验上的优化，此篇分析性能上的优化，性能的优化包括三个方面：

• Vue 代码层面的优化；
• webpack 配置层面的优化；
• 基础的 Web 技术层面的优化。

一、Vue代码代码层面的优化：

1.1图片使用懒加载

对于图片多的页面，一次性全部加载耗损性能；所以我们采用按需加载，这样对于页面加载性能上会有很大的提升，也提高了用户体验。我们在项目中使用 Vue 的 vue-lazyload 插件：

（1）安装插件

npm install vue-lazyload --save-dev

（2）在入口文件 man.js 中引入并使用

import VueLazyload from 'vue-lazyload'

然后再 vue 中直接使用

Vue.use(VueLazyload)

（3）在 vue 文件中将 img 标签的 src 属性直接改为 v-lazy ，从而将图片显示方式更改为懒加载显示：

<img v-lazy="/static/img/1.png">

详细使用可以参考官网：https://github.com/hilongjw/vue-lazyload#demo

1.2路由懒加载

通过路由懒加载，能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。参考官网Vue-Router懒加载

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

webpackChunkName处不是注释，当指定的值相同时，会将这些路由打包到一个js文件中，有利于嵌套路由组合到一个文件；

注意：(Vue官网有说明，此处特别指出)

如果您使用的是 Babel，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法

结合这两者，这就是如何定义一个能够被 Webpack 自动代码分割的异步组件。

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

在路由配置中什么都不需要改变，只需要像往常一样使用 Foo：

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

1.3v-if 和 v-show 区分使用场景

v-if与v-show的区别在于:

• v-if是从dom中移除，下次显示重新渲染dom,
• v-show是在dom中进行隐藏，类似与display:none;下次显示不需要重新渲染；

v-if 是 真正 的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

v-show 就简单得多， 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 display 属性进行切换。

所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景。

1.4v-for 遍历必须为 item 添加 key，且避免同时使用 v-if

（1）v-for 遍历必须为 item 添加 key

在列表数据进行遍历渲染时，需要为每一项 item 设置唯一 key 值，方便 Vue.js 内部机制精准找到该条列表数据。当 state 更新时，新的状态值和旧的状态值对比，较快地定位到 diff 。

注意： key不要去绑定index，因为当中间插入值的时候，index是可变的，不利于提高性能，应该用key去绑定唯一的值，如:key=item。

（2）v-for 遍历避免同时使用 v-if

v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成 computed 属性。

推荐：

<ul>
   <li
	v-for="user in activeUsers"
	:key="user.id">
	{{ user.name }}
  </li>
</ul>

//==========分割线========

computed: {
  activeUsers: function () {
     return this.users.filter(function (user) {
	  return user.isActive
      })
    }
}

不推荐：

<ul>
  <li
      v-for="user in users"
      v-if="user.isActive"
      :key="user.id">
      {{ user.name }}
  </li>
</ul>

1.5、事件的销毁

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

created() {
  addEventListener('click', this.click, false)
},
beforeDestroy() {
  removeEventListener('click', this.click, false)
}

1.6 第三方组件库按需引入

我们在项目中经常会需要引入第三方插件，如果我们直接引入整个插件，会导致项目的体积太大，我们可以借助 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 中引入部分组件：

可以将不同的第三方插件按需引入，并将这个第三方的内容独立成一个js文件，再引入到plugin目录下，利于项目文件的管理；

//============ element.js===============

import Vue from 'vue'
import {
  Button,
  Form,
 
} from 'element-ui'

Vue.use(Button)
Vue.use(Form)


Vue.prototype.$message = Message
Vue.prototype.$confirm = MessageBox.confirm


// =========== main.js==============
import './plugins/element.js'

二、Webpack 层面的优化

2.1使用Externals优化项目大小

默认情况下，通过 import 语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功
后，单文件体积过大的问题。

为了解决上述问题，可以通过 webpack 的 externals 节点，来配置并加载外部的 CDN 资源。凡是声明在
externals 中的第三方依赖包，都不会被打包。

CDN 可以通过不同的域名来加载文件，从而使下载文件的并发连接数大大增加，且CDN 具有更好的可用性，更低的网络延迟和丢包率 。

(1) 具体配置代码如下：

重点在于使用externals

//==========vue.config.js===========

module.exports = {
  chainWebpack: config => {
    // 发布模式
    config.when(process.env.NODE_ENV === 'production', config => {
      config
        .entry('app')
        .clear()
        .add('./src/main-prod.js')

      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
      })

      config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })
    })

    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config
        .entry('app')
        .clear()
        .add('./src/main-dev.js')

      config.plugin('html').tap(args => {
        args[0].isProd = false
        return args
      })
    })
  }
}

(2)在 public/index.html 文件的头部，添加如下的 CDN 资源引用：

具体操作流程如下：

• 在 main.js 中，注释掉 element-ui 按需加载的代码
• 在 index.html 的头部区域中，通过 CDN 加载 element-ui 的 js 和 css 样式

cdn的链接地址，推荐参照每一个官方网站进行引用

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

2.2Webpack 对图片进行压缩

（1）首先，安装 image-webpack-loader ：

npm install image-webpack-loader --save-dev

（2）然后，在 webpack.base.conf.js 中进行配置：

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  use:[
    {
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    },
    {
      loader: 'image-webpack-loader',
      options: {
        bypassOnDebug: true,
      }
    }
  ]
}

2.3减少 ES6 转为 ES5 的冗余代码

Babel 插件会在将 ES6 代码转换成 ES5 代码时会注入一些辅助函数，例如下面的 ES6 代码：

class HelloWebpack extends Component{...}

这段代码再被转换成能正常运行的 ES5 代码时需要以下两个辅助函数：

babel-runtime/helpers/createClass  // 用于实现 class 语法
babel-runtime/helpers/inherits  // 用于实现 extends 语法    

在默认情况下， Babel 会在每个输出文件中内嵌这些依赖的辅助函数代码，如果多个源代码文件都依赖这些辅助函数，那么这些辅助函数的代码将会出现很多次，造成代码冗余。为了不让这些辅助函数的代码重复出现，可以在依赖它们时通过 require(‘babel-runtime/helpers/createClass’) 的方式导入，这样就能做到只让它们出现一次。babel-plugin-transform-runtime 插件就是用来实现这个作用的，将相关辅助函数进行替换成导入语句，从而减小 babel 编译出来的代码的文件大小。

（1）首先，安装

babel-plugin-transform-runtime ：

npm install babel-plugin-transform-runtime --save-dev

（2）然后，修改 .babelrc 配置文件为：

"plugins": [
    "transform-runtime"
]

如果要看插件的更多详细内容，可以查看babel-plugin-transform-runtime 的 详细介绍。

2.4构建结果输出分析

Webpack 输出的代码可读性非常差而且文件非常大，让我们非常头疼。为了更简单、直观地分析输出结果，社区中出现了许多可视化分析工具。这些工具以图形的方式将结果更直观地展示出来，让我们快速了解问题所在。接下来讲解我们在 Vue 项目中用到的分析工具：webpack-bundle-analyzer 。

我们在项目中webpack.prod.conf.js 进行配置：

if (config.build.bundleAnalyzerReport) {
  var BundleAnalyzerPlugin =   require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  webpackConfig.plugins.push(new BundleAnalyzerPlugin());
}

执行npm run build --report后生成分析报告

三、基础的 Web 技术优化

3.1开启 gzip 压缩