【Vuejs】335-(超全) Vue 项目性能优化实践指南

时间 2019-11-18

原文原文链接

点击上方“前端自习课”关注，学习起来~javascript

前言

Vue 框架经过数据双向绑定和虚拟 DOM 技术，帮咱们处理了前端开发中最脏最累的 DOM 操做部分，咱们再也不须要去考虑如何操做 DOM 以及如何最高效地操做 DOM；但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题，因此咱们仍然须要去关注 Vue 项目性能方面的优化，使项目具备更高效的性能、更好的用户体验。本文是做者经过实际项目的优化实践进行总结而来，但愿读者读完本文，有必定的启发思考，从而对本身的项目进行优化起到帮助。本文内容分为如下三部分组成：html

Vue 代码层面的优化；前端
webpack 配置层面的优化；vue
基础的 Web 技术层面的优化。java

辛苦整理良久，还望手动点赞鼓励~node

github地址为：https://github.com/fengshi123/blog，汇总了做者的全部博客，也欢迎关注及 star ~webpack

1、代码层面的优化

1.一、v-if 和 v-show 区分使用场景

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

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

因此，v-if 适用于在运行时不多改变条件，不须要频繁切换条件的场景；v-show 则适用于须要很是频繁切换条件的场景。github

1.二、computed 和 watch 区分使用场景

computed：是计算属性，依赖其它属性值，而且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会从新计算 computed 的值；

watch：更多的是「观察」的做用，相似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操做；

运用场景：

当咱们须要进行数值计算，而且依赖于其它数据时，应该使用 computed，由于能够利用 computed 的缓存特性，避免每次获取值时，都要从新计算；
当咱们须要在数据变化时执行异步或开销较大的操做时，应该使用 watch，使用 watch 选项容许咱们执行异步操做 ( 访问一个 API )，限制咱们执行该操做的频率，并在咱们获得最终结果前，设置中间状态。这些都是计算属性没法作到的。

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

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

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

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

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

推荐：

&lt;ul&gt;	
  &lt;li	
    v-for="user in activeUsers"	
    :key="user.id"&gt;	
    {{ user.name }}	
  &lt;/li&gt;	
&lt;/ul&gt;	
computed: {	
  activeUsers: function () {	
    return this.users.filter(function (user) {	
   return user.isActive	
    })	
  }	
}

不推荐：

&lt;ul&gt;	
  &lt;li	
    v-for="user in users"	
    v-if="user.isActive"	
    :key="user.id"&gt;	
    {{ user.name }}	
  &lt;/li&gt;	
&lt;/ul&gt;

1.四、长列表性能优化

Vue 会经过 Object.defineProperty 对数据进行劫持，来实现视图响应数据的变化，然而有些时候咱们的组件就是纯粹的数据展现，不会有任何改变，咱们就不须要 Vue 来劫持咱们的数据，在大量数据展现的状况下，这可以很明显的减小组件初始化的时间，那如何禁止 Vue 劫持咱们的数据呢？能够经过 Object.freeze 方法来冻结一个对象，一旦被冻结的对象就不再能被修改了。

export default {	
  data: () =&gt; ({	
    users: {}	
  }),	
  async created() {	
    const users = await axios.get("/api/users");	
    this.users = Object.freeze(users);	
  }	
};

1.五、事件的销毁

Vue 组件销毁时，会自动清理它与其它实例的链接，解绑它的所有指令及事件监听器，可是仅限于组件自己的事件。若是在 js 内使用 addEventListene 等方式是不会自动销毁的，咱们须要在组件销毁时手动移除这些事件的监听，以避免形成内存泄露，如：

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

1.六、图片资源懒加载

对于图片过多的页面，为了加速页面加载速度，因此不少时候咱们须要将页面内未出如今可视区域内的图片先不作加载，等到滚动到可视区域后再去加载。这样对于页面加载性能上会有很大的提高，也提升了用户体验。咱们在项目中使用 Vue 的 vue-lazyload 插件：

（1）安装插件

npm install vue-lazyload --save-dev

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

import VueLazyload from 'vue-lazyload'

而后再 vue 中直接使用

Vue.use(VueLazyload)

或者添加自定义选项

Vue.use(VueLazyload, {	
preLoad: 1.3,	
error: 'dist/error.png',	
loading: 'dist/loading.gif',	
attempt: 1	
})

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

&lt;img v-lazy="/static/img/1.png"&gt;

以上为 vue-lazyload 插件的简单使用，若是要看插件的更多参数选项，能够查看 vue-lazyload 的 github 地址。

1.七、路由懒加载

Vue 是单页面应用，可能会有不少的路由引入，这样使用 webpcak 打包后的文件很大，当进入首页时，加载的资源过多，页面会出现白屏的状况，不利于用户体验。若是咱们能把不一样路由对应的组件分割成不一样的代码块，而后当路由被访问的时候才加载对应的组件，这样就更加高效了。这样会大大提升首屏显示的速度，可是可能其余的页面的速度就会降下来。

路由懒加载：

const Foo = () =&gt; import('./Foo.vue')	
const router = new VueRouter({	
  routes: [	
    { path: '/foo', component: Foo }	
  ]	
})

1.八、第三方插件的按需引入

咱们在项目中常常会须要引入第三方插件，若是咱们直接引入整个插件，会致使项目的体积太大，咱们能够借助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 { Button, Select } from 'element-ui';	

	
 Vue.use(Button)	
 Vue.use(Select)

1.九、优化无限列表性能

若是你的应用存在很是长或者无限滚动的列表，那么须要采用窗口化的技术来优化性能，只须要渲染少部分区域的内容，减小从新渲染组件和建立 dom 节点的时间。你能够参考如下开源项目 vue-virtual-scroll-list 和 vue-virtual-scroller 来优化这种无限列表的场景的。

1.十、服务端渲染 SSR or 预渲染

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

（1）服务端渲染的优势：

更好的 SEO：由于 SPA 页面的内容是经过 Ajax 获取，而搜索引擎爬取工具并不会等待 Ajax 异步完成后再抓取页面内容，因此在 SPA 中是抓取不到页面经过 Ajax 获取到的内容；而 SSR 是直接由服务端返回已经渲染好的页面（数据已经包含在页面中），因此搜索引擎爬取工具能够抓取渲染好的页面；
更快的内容到达时间（首屏加载更快）：SPA 会等待全部 Vue 编译后的 js 文件都下载完成后，才开始进行页面的渲染，文件下载等须要必定的时间等，因此首屏渲染须要必定的时间；SSR 直接由服务端渲染好页面直接返回显示，无需等待下载 js 文件及再去渲染等，因此 SSR 有更快的内容到达时间；

（2）服务端渲染的缺点：

更多的开发条件限制：例如服务端渲染只支持 beforCreate 和 created 两个钩子函数，这会致使一些外部扩展库须要特殊处理，才能在服务端渲染应用程序中运行；而且与能够部署在任何静态文件服务器上的彻底静态单页面应用程序 SPA 不一样，服务端渲染应用程序，须要处于 Node.js server 运行环境；
更多的服务器负载：在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用CPU 资源，所以若是你预料在高流量环境下使用，请准备相应的服务器负载，并明智地采用缓存策略。

若是你的项目的 SEO 和首屏渲染是评价项目的关键指标，那么你的项目就须要服务端渲染来帮助你实现最佳的初始加载性能和 SEO，具体的 Vue SSR 如何实现，能够参考做者的另外一篇文章《Vue SSR 踩坑之旅》。若是你的 Vue 项目只需改善少数营销页面（例如 /， /about， /contact 等）的 SEO，那么你可能须要预渲染，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优势是设置预渲染更简单，并能够将你的前端做为一个彻底静态的站点，具体你可使用 prerender-spa-plugin 就能够轻松地添加预渲染。

2、Webpack 层面的优化

2.一、Webpack 对图片进行压缩

在 vue 项目中除了能够在webpack.base.conf.js中 url-loader 中设置 limit 大小来对图片处理，对小于 limit 的图片转化为 base64 格式，其他的不作操做。因此对有些较大的图片资源，在请求资源的时候，加载会很慢，咱们能够用image-webpack-loader来压缩图片：

（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.二、减小 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.三、提取公共代码

若是项目中没有去将每一个页面的第三方库和公共模块提取出来，则项目会存在如下问题：

相同的资源被重复加载，浪费用户的流量和服务器的成本。
每一个页面须要加载的资源太大，致使网页首屏加载缓慢，影响用户体验。

因此咱们须要将多个页面的公共代码抽离成单独的文件，来优化以上问题。Webpack 内置了专门用于提取多个Chunk 中的公共部分的插件 CommonsChunkPlugin，咱们在项目中 CommonsChunkPlugin 的配置以下：

// 全部在 package.json 里面依赖的包，都会被打包进 vendor.js 这个文件中。	
new webpack.optimize.CommonsChunkPlugin({	
  name: 'vendor',	
  minChunks: function(module, count) {	
    return (	
      module.resource &amp;&amp;	
      /.js$/.test(module.resource) &amp;&amp;	
      module.resource.indexOf(	
        path.join(__dirname, '../node_modules')	
      ) === 0	
    );	
  }	
}),	
// 抽取出代码模块的映射关系	
new webpack.optimize.CommonsChunkPlugin({	
  name: 'manifest',	
  chunks: ['vendor']	
})

若是要看插件的更多详细内容，能够查看 CommonsChunkPlugin 的详细介绍。

2.四、模板预编译

当使用 DOM 内模板或 JavaScript 内的字符串模板时，模板会在运行时被编译为渲染函数。一般状况下这个过程已经足够快了，但对性能敏感的应用仍是最好避免这种用法。

预编译模板最简单的方式就是使用单文件组件——相关的构建设置会自动把预编译处理好，因此构建好的代码已经包含了编译出来的渲染函数而不是原始的模板字符串。

若是你使用 webpack，而且喜欢分离 JavaScript 和模板文件，你可使用 vue-template-loader，它也能够在构建过程当中把模板文件转换成为 JavaScript 渲染函数。

2.五、提取组件的 CSS

当使用单文件组件时，组件内的 CSS 会以 style 标签的方式经过 JavaScript 动态注入。这有一些小小的运行时开销，若是你使用服务端渲染，这会致使一段 “无样式内容闪烁 (fouc) ” 。将全部组件的 CSS 提取到同一个文件能够避免这个问题，也会让 CSS 更好地进行压缩和缓存。

查阅这个构建工具各自的文档来了解更多：

webpack + vue-loader ( vue-cli 的 webpack 模板已经预先配置好)
Browserify + vueify
Rollup + rollup-plugin-vue

2.六、优化 SourceMap

咱们在项目进行打包后，会将开发中的多个文件代码打包到一个文件中，而且通过压缩、去掉多余的空格、babel编译化后，最终将编译获得的代码会用于线上环境，那么这样处理后的代码和源代码会有很大的差异，当有 bug的时候，咱们只能定位到压缩处理后的代码位置，没法定位到开发环境中的代码，对于开发来讲很差调式定位问题，所以 sourceMap 出现了，它就是为了解决很差调式代码问题的。

SourceMap 的可选值以下（+ 号越多，表明速度越快，- 号越多，表明速度越慢, o 表明中等速度）

开发环境推荐：cheap-module-eval-source-map

生产环境推荐：cheap-module-source-map

缘由以下：

cheap：源代码中的列信息是没有任何做用，所以咱们打包后的文件不但愿包含列相关信息，只有行信息能创建打包先后的依赖关系。所以无论是开发环境或生产环境，咱们都但愿添加 cheap 的基本类型来忽略打包先后的列信息；
module：无论是开发环境仍是正式环境，咱们都但愿能定位到bug的源代码具体的位置，好比说某个 Vue 文件报错了，咱们但愿能定位到具体的 Vue 文件，所以咱们也须要 module 配置；
soure-map：source-map 会为每个打包后的模块生成独立的 soucemap 文件，所以咱们须要增长source-map 属性；
eval-source-map：eval 打包代码的速度很是快，由于它不生成 map 文件，可是能够对 eval 组合使用 eval-source-map 使用会将 map 文件以 DataURL 的形式存在打包后的 js 文件中。在正式环境中不要使用 eval-source-map, 由于它会增长文件的大小，可是在开发环境中，能够试用下，由于他们打包的速度很快。

2.七、构建结果输出分析

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 后生成分析报告以下：

2.八、Vue 项目的编译优化

若是你的 Vue 项目使用 Webpack 编译，须要你喝一杯咖啡的时间，那么也许你须要对项目的 Webpack 配置进行优化，提升 Webpack 的构建效率。具体如何进行 Vue 项目的 Webpack 构建优化，能够参考做者的另外一篇文章《 Vue 项目 Webpack 优化实践》

3、基础的 Web 技术优化

3.一、开启 gzip 压缩

gzip 是 GNUzip 的缩写，最先用于 UNIX 系统的文件压缩。HTTP 协议上的 gzip 编码是一种用来改进 web 应用程序性能的技术，web 服务器和客户端（浏览器）必须共同支持 gzip。目前主流的浏览器，Chrome，firefox，IE等都支持该协议。常见的服务器如 Apache，Nginx，IIS 一样支持，gzip 压缩效率很是高，一般能够达到 70% 的压缩率，也就是说，若是你的网页有 30K，压缩以后就变成了 9K 左右

如下咱们以服务端使用咱们熟悉的 express 为例，开启 gzip 很是简单，相关步骤以下：

安装：

npm install compression --save

添加代码逻辑：

var compression = require('compression');	
var app = express();	
app.use(compression())

重启服务，观察网络面板里面的 response header，若是看到以下红圈里的字段则代表 gzip 开启成功：

3.二、浏览器缓存

为了提升用户加载页面的速度，对静态资源进行缓存是很是必要的，根据是否须要从新向服务器发起请求来分类，将 HTTP 缓存规则分为两大类（强制缓存，对比缓存），若是对缓存机制还不是了解很清楚的，能够参考做者写的关于 HTTP 缓存的文章《深刻理解HTTP缓存机制及原理》，这里再也不赘述。

3.三、CDN 的使用

浏览器从服务器上下载 CSS、js 和图片等文件时都要和服务器链接，而大部分服务器的带宽有限，若是超过限制，网页就半天反应不过来。而 CDN 能够经过不一样的域名来加载文件，从而使下载文件的并发链接数大大增长，且CDN 具备更好的可用性，更低的网络延迟和丢包率。

3.四、使用 Chrome Performance 查找性能瓶颈

Chrome 的 Performance 面板能够录制一段时间内的 js 执行细节及时间。使用 Chrome 开发者工具分析页面性能的步骤以下。

打开 Chrome 开发者工具，切换到 Performance 面板
点击 Record 开始录制
刷新页面或展开某个节点
点击 Stop 中止录制

更多关于 Performance 的内容能够点击这里查看。

总结

本文经过如下三部分组成：Vue 代码层面的优化、webpack 配置层面的优化、基础的 Web 技术层面的优化；来介绍怎么去优化 Vue 项目的性能。但愿对读完本文的你有帮助、有启发，若是有不足之处，欢迎批评指正交流！

源自：https://juejin.im/post/5d548b83f265da03ab42471d

声明：文章著做权归做者全部，若有侵权，请联系小编删除。

▼

原创系列推荐

▼

1. JavaScript 重温系列（22篇全）

2. ECMAScript 重温系列（10篇全）

3. JavaScript设计模式重温系列（9篇全）

4. 正则 / 框架 / 算法等重温系列（16篇全）

5. Webpack4 入门手册（共 18 章）（上）

6. Webpack4 入门手册（共 18 章）（下）

7. 59篇原创系列汇总

点这，与你们一块儿分享本文吧~