VUE项目性能优化-实战-案例记录

VUE项目性能优化

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

1、代码层面的优化

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

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

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

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

1.2 computed 和 watch 区分使用场景

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

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

运用场景：

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

1.3 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 属性。

推荐：

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

js
computed:{
	activeUsers:function(){
		return this.users.filter((user)=>{
			return user.isActive
		})
	}
}
复制代码

不推荐：

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

1.四、长列表性能优化

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

export default{
	data:() => ({
		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)在入口文件main.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，从而将图片显示方式更改成懒加载显示：

<img v-lazy="/static/img/1.png">
复制代码

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

1.7 路由懒加载

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

const Foo = () => import('./Foo.vue')
const router = new VueRouter({
	routes:[
		{ path:'/foo', component: Foo }
	]
})
复制代码

1.8 第三方插件的按需引入

咱们在项目中常常会须要引入第三方插件，若是咱们直接引入整个插件，会致使项目的体积太大，咱们能够借助 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.9 优化无线列表性能

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

1.10 服务端渲染SSR or 预渲染

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

(1) 服务端渲染的优势：

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

(2) 服务端渲染的缺点

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

若是你的项目的SEO和首屏渲染是评价项目的关键指标，那么你的项目就须要服务端渲染来帮组你实现最佳的初始加载性能和SEO，具体的Vue SSR如何实现，能够参考做者的另外一篇《Vue SSR 踩坑之旅》

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的 详细介绍。

ps:vue-cli脚手架建立的项目都会自带这个插件的好像.

2.三、 提取公共代码

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

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

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

// 全部在 package.json 里面依赖的包，都会被打包进 vendor.js这个文件中。
new webpack.optimize.CommonsChunkPlugin({
	name:'vendor',
	minChunks:function(module,count){
		return(
			module.resource && 
			/\.js$/.test(module.resource) &&
			module.resource.indexOf(
				path.join(__dirname,'../node_modules')
			) === 0
		);
	}
}),

//抽取出代码模块的映射关系
new webpack.optimize.CommonsChunkPlugin({
	name:'manifest',
	chunks:['vendor']
})
复制代码

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

2.4模板预编译

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

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

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

2.5 提取组件的CSS

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

• webpack+vue-loader（vue-cli的webpack模板已预先配置好）
• Browserify + vueify Browserify官网 vueify
• Rollup+ rollup-plugin-vue Rollup官网 rollup-plugin-vue介绍

2.六、优化SourceMap

SourceMap使用教程

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

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

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

缘由以下：

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

2.7 构建结构输出分析

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构建优化。能够参考：轻松优化你的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缓存机制及原理》，这里再也不赘述。