锐客网

  1. 首页 > 睿知 > >

vue性能优化有哪些 vue性能优化总结( 二 )

生活知识经验知识


（3）在 vue 文件中将 img 标签的 src 属性直接改为 v-lazy。从而将图片展现方法更改为懒加载展现：
<img v-lazy=/static/img/1.png>
以上为 vue-lazyload 插件的无脑使用 。如果要看插件的再多参数选项 。应该查看 vue-lazyload 的 github 地址 。
1.7、路由懒加载Vue 是单页面应用 。可能会有很多的路由引入。这样使用 webpcak 打包后的文件很大 。当进入首页时 。加载的资源过多 。页面会出现白屏的状态 。不利于客户体验 。如果我们能把不一样路由对应的组件分割成不一样的代码块 。之后当路由被访问的时候才加载对应的组件 。这样就更加高效了 。这样会大大提高首屏展现的速度 。但是可能很多的的页面的速度就会降下来 。路由懒加载：
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）服务端渲染的缺点：再多的研究条件压制：例如服务端渲染只支持 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 就应该轻松地添加预渲染。
二、Webpack 层面的优化2.1、Webpack 对图片进行压缩在 vue 项目中除了应该在 webpack.base.conf.js 中 url-loader 中设置 limit 大小来对图片处理 。对小于 limit 的图片转化为 base64 格式 。其余的不做操作 。所以对一些较大的图片资源 。在请求资源的时候 。加载会很慢 。我们应该用 image-webpack-loader来压缩图片：（1）首先 。安装 image-webpack-loader ：

推荐阅读


上一篇：如果50光年外存在高级文明,收到地球发射的无线电波后就发动光粒攻击,地球人还有救吗？

下一篇：张大仙试水峡谷寻宝记,400块钱开出3款良心皮肤,仙友：“天美亏大了”,你有何看法？