代码层面的优化

1.v-if和v-show的合理使用；

v-if是真正意义上的条件渲染，因为他会确保在切换过程中条件块内的事件监听器和子组件适当地销毁和重建；是惰性，即什么时候为true，什么时候渲染；
v-show （display）
v-if适用于在运行时很少改变条件，不需要频繁切换条件的场景，v-show则适用于需要频繁切换条件的场景。
（下一个就手动实现一个v-if和一个v-show）

2.computed和watch的合理运用

computed是计算属性，依赖其他属性值，并且computed的值是有缓存的，只有依赖的属性值发生变化时才会发生改变；
watch更多的是起观察作用，类似于某些数据的监听回调，当数据变化时进行后续的操作；

computed运用场景：返回vuex的state，getter，以下为摘抄：当我们需要进行数值的计算，并且依赖于其他数据时，因为可以很好的利用computed的缓存作用，避免每次取值的时候都要重复计算；
watch运用场景：以下为摘抄：当我们需要在数据变化时执行异步或开销较大的操作时，使用watch选项允许我们执行异步操作（比如访问api），限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。

3.v-for和v-if 不可以同时使用

v-for的优先级比v-if要高，必须同时使用的话，建议把v-if条件放在computed中；

4.长列表的性能优化

需要数据劫持的放在data中，不需要你就定义在外面呗，Object.defineProperty不耗性能啊。或者使用Object.freeze()冻结该对象

5.事件的销毁

addEventListener()和removeEventListener()要配合使用；我们要在组件销毁的时候手动移除注册的事件的监听，以免造成内存泄漏。

6.优化无限列表的性能

如果在你的项目中存在无限列表，建议参考vue-virtual-scroll-list和vue-virtual-scroller来优化无限列表的场景。采用窗口化的技术来优化，只需要渲染少部分的区域的内容，减少重新渲染组件和创建dom节点的时间。

7.服务端渲染ssr或者预渲染

服务端渲染是指vue在客户端将标签渲染成的整个html片段的工作在服务端完成，服务端形成的html片段就直接返回给客户端这个过程就叫做服务端渲染。
优点：
1.利于SEO，因为spa页面的内容通过ajax获取，而搜索引擎爬取工具并不会等待ajax异步完成后再抓取页面内容，所以spa是抓取不到页面通过ajax获取到的内容；而ssr是服务端直接返回的html整体，所以搜索引擎可以直接抓取全部；
2.更快的渲染时间，首屏加载的时间会大大缩短。spa需要等待所有需要的vue编译以后所有js下载完成后，才开始页面的渲染，文件下载需要时间，所以首屏渲染需要一定的时间，ssr直接由服务端渲染好页面后直接返回显示，

缺点：
1.更多的开发限制，ssr仅支持beforecreated和created两个钩子，第三方插件库需要特殊处理，需要服务端支持，
2.服务器的负载加重，

webpack层面的优化

1.webpack对图片的压缩，

参考image-webpack-loader

2.减少babel时ES6转化为ES5的冗余

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

3.提取公共代码

此处主要是指第三方库的共同依赖的代码，参考 CommonsChunkPlugin,

4.模板的预编译

以下为摘抄：当使用 DOM 内模板或 JavaScript 内的字符串模板时，模板会在运行时被编译为渲染函数。通常情况下这个过程已经足够快了，但对性能敏感的应用还是最好避免这种用法。
预编译模板最简单的方式就是使用单文件组件——相关的构建设置会自动把预编译处理好，所以构建好的代码已经包含了编译出来的渲染函数而不是原始的模板字符串。
如果你使用 webpack，并且喜欢分离 JavaScript 和模板文件，你可以使用 vue-template-loader，它也可以在构建过程中把模板文件转换成为 JavaScript 渲染函数。

5.提取组件的css

vue单文件组件的style标签会造成一些运行开销，将所有组件的css提取到同一css文件可以避免这个问题，让css更好的压缩和缓存。

6.about SourceMap

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

7.构建结果输出分析

参考：webpack-bundle-analyzer

基础的web技术优化

1.开启gzip压缩：

2.浏览器的缓存

静态资源缓存！

3.cdn的使用

4.使用chrome的 performance查找性能的瓶颈

Vue项目的优化（二）相关推荐

vue项目性能优化——断点续传
vue项目性能优化用户上传文件的时候,如果文件过大,那么上传可能就会很耗时.而且一旦上传的过程中发生了网络中断,那上传就前功尽弃了.为了提高用户的体验,我们可以选择断点续传,也就是把文件切分成小块后 ...
Vue 项目性能优化方案
前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM:但 Vue 项目中仍然存 ...
记一次vue项目打包优化
目录前言一.优化静态资源二.vue项目打包体积优化 1.路由懒加载 2.抽离第三方js库 3.小结三.代码优化 1.减少页面的重排和重绘 2.多设置key值四.服务器优化 1.nginx服务 ...
前端Vue 项目性能优化
前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM:但 Vue 项目中仍然存 ...
vue项目打包优化策略
vue项目打包优化策略使用vue-cli部署生产包时,发现资源包很大,打包后的vendor.js达到了1.4M,这已经很大了,而且会影响到首屏加载.那么,怎么优化呢? 1.组件按需加载这是首先可以 ...
VUE项目学习（二）：学习项目文件结构
VUE项目学习(二):学习项目文件结构 VUE项目结构: index.html:主页,项目入口 App.vue:根组件 main.js:入口文件 router文件夹下的index.js:路由配置文件 ...
vue引入cdn Vue 优化Vue引入 cdn vue cdn Vue优化引入CDN vue 项目 CDN优化
vue引入cdn Vue 优化Vue引入 cdn vue cdn Vue优化引入CDN vue 项目 CDN优化未引入 CDN前 main.js 更改CDN方式引入在 vue.config 中引入 ...
Vue项目SEO优化之预渲染--prerender-spa-plugin 搭配vue-meta-info
Vue项目SEO优化之预渲染–prerender-spa-plugin 搭配vue-meta-info prerender-spa-plugin配置安装执行npm i prerender-spa- ...
Vue项目性能优化篇
Vue项目性能优化是个老生常谈的问题了,本人开发过程中也查过很多关于Vue项目优化的文章,每篇文章说的都差不多,本章我就结合我的心得和大家的智慧做一个总结. 1.懒加载懒加载应该是提高性能的最简单有 ...
Vue项目性能优化方案
一.代码层面的优化 1.v-if和v-show的使用场景 (1)v-if适用于在运行时很少改变条件,不需要频繁切换条件的场景,属于真正的条件渲染,会确保在切换过程中,元素适当的被销毁和重建,也是惰 ...

Vue项目的优化（二）