网站的建设参考文献,西安网站制作机构,wordpress圈子,大连城市建设网站前言#xff1a;vue-cli项目开发打包部署后#xff0c;存在问题有首次首页加载过慢#xff0c;包括加载缓慢问题#xff0c;需要进行vue项目优化。下面是对vue性能优化方法进行归纳#xff0c;后面会对方法进行亲测。
主要包括#xff1a;代码包打包优化、编码优化、用户…前言vue-cli项目开发打包部署后存在问题有首次首页加载过慢包括加载缓慢问题需要进行vue项目优化。下面是对vue性能优化方法进行归纳后面会对方法进行亲测。
主要包括代码包打包优化、编码优化、用户体验优化 一、代码包打包优化
可以在谷歌浏览器的调试工具F12中看到打包后生成的app.js文件过大
1、屏蔽sourceMap
进行打包源码上线环节需要对项目开发环节的开发提示信息以及错误信息进行屏蔽一方面可以减少上线代码包的大小另一方面提高系统的安全性。在vuejs项目的config目录下有三个文件dev.env.js(开发环境配置文件)、prod.env.js(上线配置文件)、index.js(通用配置文件)。vue-cli脚手架在上线配置文件会自动设置允许sourceMap打包所以在上线前可以屏蔽sourceMap。如下所示index.js的配置如下,通用配置文件分别对开发环境和上线环境做了打包配置分类在build对象中的配置信息中productionSourceMap修改成false:
module.exports {dev: {...},build: {// Template for index.htmlindex: path.resolve(__dirname, ../dist/ndindex.html),// PathsassetsRoot: path.resolve(__dirname, ../dist),assetsSubDirectory: static,assetsPublicPath: ./,/*** Source Maps*/productionSourceMap: false, //这里关闭Source Maps// https://webpack.js.org/configuration/devtool/#productiondevtool: #source-map,// Gzip off by default as many popular static hosts such as// Surge or Netlify already gzip all static assets for you.// Before setting to true, make sure to:// npm install --save-dev compression-webpack-pluginproductionGzip: true,productionGzipExtensions: [js, css,svg],// Run the build command with an extra argument to// View the bundle analyzer report after build finishes:// npm run build --report// Set to true or false to always turn it on or offbundleAnalyzerReport: process.env.npm_config_report}
}
2、对项目代码中的JS/CSS/SVG(*.ico)文件进行gzip压缩
在vue-cli脚手架的配置信息中有对代码进行压缩的配置项例如index.js的通用配置productionGzip设置为true但是首先需要对compress-webpack-plugin支持所以需要通过 npm install --save-dev compression-webpack-plugingzip会对js、css文件进行压缩处理对于图片进行压缩问题对于pngjpgjpeg没有压缩效果对于svgico文件以及bmp文件压缩效果达到50%在productionGzipExtensions: [js, css,svg]设置需要进行压缩的什么格式的文件。对项目文件进行压缩之后需要浏览器客户端支持gzip以及后端支持gzip。下面可以查看成功支持gzip状态
module.exports {dev: {...},build: {...// Gzip off by default as many popular static hosts such as// Surge or Netlify already gzip all static assets for you.// Before setting to true, make sure to:// npm install --save-dev compression-webpack-pluginproductionGzip: true,productionGzipExtensions: [js, css,svg],...}
} 二、源码优化
1、对路由组件进行懒加载 懒加载也叫延迟加载即在需要的时候进行加载随用随载。
在路由配置文件里这里是router.js里面引用组件。如果使用同步的方式加载组件在首屏加载时会对网络资源加载加载比较多资源比较大加载速度比较慢。所以设置路由懒加载按需加载会加速首屏渲染。在没有对路由进行懒加载时在Chrome里devtool查阅可以看到首屏网络资源加载情况6requests 3.8MB transfferred Finish:4.67s DOMContentLoaded 2.61s Load 2.70s。在对路由进行懒加载之后7requests 800kb transffered Finish2.67s DOMContentLoaded 1.72s Load 800ms,可以看见加载速度明显加快。但是进行懒加载之后实现按需加载那么项目打包不会把所有js打包进app.[hash].js里面优点是可以减少app.[hash].js体积缺点就是会把其它js分开打包造成多个js文件会有多次https请求。如果项目比较大需要注意懒加载的效果
使用如下 routes: [{ path: /, redirect: index },{path: /,name: home,component: resolverequire([/views/home],resolve),children: [{// 员工查询path: /employees,component: resolverequire([/components/employees],resolve)},{// 首页path: /index,component: resolverequire([/views/index],rolve)},]}
] 2、组件异步加载
vue官网指南提到异步组件的使用在大型应用中我们可能需要将应用分割成小一些的代码块并且只在需要的时候才从服务器加载一个模块。Vue 只有在这个组件需要被渲染的时候才会触发工厂函数且会把结果缓存起来供未来重渲染。
2.1、v-if惰性结合setTimeout 使组件异步加载
加载首页的时候可以先给首页的子组件设置v-if “false”在页面初始化的时候再给子组件设置为true此方法利用了v-if的惰性setTimeout会使子组件在所有的组件初始化完成并显示后再对其子组件进行初始化。 注在实际开发中还遇到了另一种情况也可以用此方法解决在入口js中获取了app的token但是在具体页面中发现不管是在created还是mounted中都是有时候能获取到token有时候又不可以是因为执行顺序的原因可以通过 setTimeout 时间设置为0 这种方法把用到token的请求方法给排到最后这样就能保证请求方法中有token了。 2.2、异步组件按需加载
webpack 2 结合 ES2015 语法如下。
Vue.component(async-webpack-example,// 这个 import 函数会返回一个 Promise 对象。() import(./my-async-component)
)
上面全局组件当使用局部注册的时候如下因为import函数返回的是一个promise对象因此可以用promise本身的then()和catch()方法去监听到组件的加载。
new Vue({// ...components: {my-component: () import(./my-async-component)}
}) 3、vue-lazyload插件图片懒加载
项目中过多的图片会严重影响网页的加载速度并且移动网络下的流量消耗巨大所以说延迟加载几乎是标配了。 图片懒加载显示当前用户界面再加载显示图片实现的原理很简单就是我们先设置图片的data-set属性当然也可以是其他任意的只要不会发送http请求就行了作用就是为了存取值值为其图片路径由于不是src所以不会发送http请求。 然后我们计算出页面scrollTop的高度和浏览器的高度之和 如果图片举例页面顶端的坐标Y相对于整个页面而不是浏览器窗口小于前两者之和就说明图片就要显示出来了合适的时机当然也可以是其他情况这时候我们再将 data-set 属性替换为 src 属性即可。
3.1、JavaScript实现
!DOCTYPE html
html langen
headmeta charsetUTF-8titleLazyload 2/titlestyleimg {display: block;margin-bottom: 50px;height: 200px;}/style
/head
bodyimg srcimages/loading.gif data-srcimages/1.pngimg srcimages/loading.gif data-srcimages/2.pngimg srcimages/loading.gif data-srcimages/3.pngimg srcimages/loading.gif data-srcimages/4.pngimg srcimages/loading.gif data-srcimages/5.pngimg srcimages/loading.gif data-srcimages/6.pngscriptfunction throttle(fn, delay, atleast) {//函数绑定在 scroll 事件上当页面滚动时避免函数被高频触发var timeout null,//进行去抖处理startTime new Date();return function() {var curTime new Date();clearTimeout(timeout);if(curTime - startTime atleast) {fn();startTime curTime;}else {timeout setTimeout(fn, delay);}}}function lazyload() {var images document.getElementsByTagName(img);var len images.length;var n 0; //存储图片加载到的位置避免每次都从第一张图片开始遍历 return function() {var seeHeight document.documentElement.clientHeight;var scrollTop document.documentElement.scrollTop || document.body.scrollTop;for(var i n; i len; i) {if(images[i].offsetTop seeHeight scrollTop) {if(images[i].getAttribute(src) images/loading.gif) {images[i].src images[i].getAttribute(data-src);}n n 1;}}}}var loadImages lazyload();loadImages(); //初始化首页的页面图片window.addEventListener(scroll, throttle(loadImages, 500, 1000), false);//函数节流throttle与函数去抖debounce处理,
//500ms 的延迟和 1000ms 的间隔当超过 1000ms 未触发该函数则立即执行该函数不然则延迟 500ms 执行该函数/script
/body
/html 3.2、vue-cli项目中vue-lazyload 插件实现
3.2.1. 安装插件
npm install vue-lazyload --save-dev
3.2.2. main.js引入插件
import VueLazyLoad from vue-lazyload
Vue.use(VueLazyLoad,{error:./static/error.png,loading:./static/loading.png
})
3.2.3. vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy
img classitem-pic v-lazynewItem.picUrl/ 功能扩展
图片懒加载的简单效果已经实现了然后就可以按这开发文档的api进行扩展了
keydescriptiondefaultoptionspreLoadproportion of pre-loading height预加载高度比例1.3Numbererrorsrc of the image upon load fail图片路径错误时加载图片data-srcStringloadingsrc of the image while loading预加载图片data-srcStringattemptattempts count尝试加载图片数量3NumberlistenEvents events that you want vue listen for 想要监听的vue事件 默认[scroll]可以省略 当插件跟页面中的动画或过渡等事件有冲突是 可以尝试其他选项 [scroll默认, wheel, mousewheel, resize, animationend, transitionend, touchmove] Desired Listen Eventsadapter dynamically modify the attribute of element 动态修改元素属性 { }Element Adapterfilterthe images listener filter动态修改图片地址路径{ }Image listener filterlazyComponentlazyload componentfalseLazy ComponentdispatchEventtrigger the dom eventfalseBooleanthrottleWaitthrottle wait200Numberobserveruse IntersectionObserverfalseBooleanobserverOptionsIntersectionObserver options{ rootMargin: 0px, threshold: 0.1 }IntersectionObserver4、引入外部插件或CDN引用不要在vue中引入
我们可以打包 时不打包 vue、vuex、vue-router、axios 等换用国内的 bootcdn 直接引入到根目录的 index.html 中这样可以减少app.js大小。采用CDN外部加载去掉其他页面的组件import修改webpack.base.config.js在externals中加入该组件这是为了避免编译时找不到组件报错。
script src//cdn.bootcss.com/vue/2.2.5/vue.min.js/script
script src//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js/script
script src//cdn.bootcss.com/vuex/2.2.1/vuex.min.js/script
script src//cdn.bootcss.com/axios/0.15.3/axios.min.js/scriptexternals: {vue: Vue,vue-router: VueRouter,vuex: Vuex,axios: axios
}5、使用到第三方库的时按需引用
在项目开发中我们会用到很多第三方库如果可以按需引入我们可以只引入自己需要的组件来减少组件库所占空间如element-ui组件库按需只加载部分组件Button、Select官网 按需引入element-ui
5.1. 安装babel-plugin-component插件
npm install babel-plugin-component -D
5.2. 配置插件将 .babelrc修改为
{presets: [[es2015, { modules: false }]],plugins: [[component,{libraryName: element-ui,styleLibraryName: theme-chalk}]]
}
5.3. 引入部分组件比如 Button 和 Select那么需要在 main.js 中写入以下内容
import Vue from vue;
import { Button, Select } from element-ui;
import App from ./App.vue;Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为* Vue.use(Button)* Vue.use(Select)*/new Vue({el: #app,render: h h(App)
}); 三、用户体验优化
1、loading加载效果
用于加载数据时显示动效。当请求服务端接口需要一定时间时在请求时加上一个loading 加载动画效果将极大提升用户体验和减轻服务端压力。 实现方案
a、使用elementUI的loading组件可以通过指令或服务的形式调用。
指令形式调用可以自定义加载动画的文字、遮罩层颜色、spinner加载图标的类名如下
templateel-tablev-loadingloadingelement-loading-text拼命加载中element-loading-spinnerel-icon-loadingelement-loading-backgroundrgba(0, 0, 0, 0.8):datatableDatastylewidth: 100%el-table-columnpropdatelabel日期width180/el-table-columnel-table-columnpropnamelabel姓名width180/el-table-columnel-table-columnpropaddresslabel地址/el-table-column/el-table
/templatescriptexport default {data() {return {tableData: [{date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}],loading: true};}};
/script
上述loading布尔值可以结合vuex状态进行全局控制是否展示loading效果 引入 Loading 服务
import { Loading } from element-ui;在需要调用时
Loading.service(options);其中 options 参数为 Loading 的配置项具体见下表。LoadingService 会返回一个 Loading 实例可通过调用该实例的 close 方法来关闭它
let loadingInstance Loading.service(options);
this.$nextTick(() { // 以服务的方式调用的 Loading 需要异步关闭loadingInstance.close();
});需要注意的是以服务的方式调用的全屏 Loading 是单例的若在前一个全屏 Loading 关闭前再次调用全屏 Loading并不会创建一个新的 Loading 实例而是返回现有全屏 Loading 的实例
let loadingInstance1 Loading.service({ fullscreen: true });
let loadingInstance2 Loading.service({ fullscreen: true });
console.log(loadingInstance1 loadingInstance2); // true此时调用它们中任意一个的 close 方法都能关闭这个全屏 Loading。
如果完整引入了 Element那么 Vue.prototype 上会有一个全局方法 $loading它的调用方式为this.$loading(options)同样会返回一个 Loading 实例 b、可以使用命令【npm install --save vue-element-loading】安装该插件后直接使用
使用
import Vue from vueimport VueElementLoading from vue-element-loadingVue.component(VueElementLoading, ElementLoading)
Or
import VueElementLoading from vue-element-loadingexport default {components: {VueElementLoading}} //全屏
vue-element-loading :activeisActive :is-full-screentrue///组件内容器
div classmy-containervue-element-loading :activeisActive spinnerbar-fade-scale color#FF6700/spanLorem ipsum dolor sit amet, consectetur adipiscing elit.Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit./span
/div
Options Props Type Default Description activeBoolean-Status for show/hide loadingspinnerStringspinnerSpinner icon name: spinner, mini-spinner, ring, line-wave, line-scale, line-down, bar-fade, bar-fade-scalecolorString#cccColor of spinner iconis-full-screenBooleanfalseLoader will overlay the full pagebackground-colorStringrgba(255, 255, 255, .9)Background color of spinner icon (for overlay)sizeString40The size to display the spinner in pixels (NOTE: this will not affect custom spinner images)durationString0.6The duration of one loop of the spinner animation, in seconds (NOTE: this will not affect custom spinner images)textString-Text will appear below loadertext-styleObject{}Change style of the text below loader使用参考网址https://biigpongsatorn.github.io/#/vue-element-loading可以看到有不同的loading动画效果如下图 2、骨架屏加载
背景使用Vue和Webpack进行**MPA(单、多页面应用)**的开发一般会在页面进行数据接口等待时增加Loading动画为用户提供较好的交互体验。但是会发现Loading展示的时机是在Vue框架解析后也就是说需要如下几个条件才能显示
HTML文件加载完成JavaScript文件加载完成window对象中完成webpackJsonp方法的添加
因此等待的时间HTML加载时间JS加载时间JS全局环境创建的执行时间。若是JS资源文件较大或者存在过多的图片资源导致资源速度下载较慢时用户所能看到的白屏时间便较长。
因此添加骨架屏其优势在于
写于HTML文件中独立于Vue框架节省了JS加载时间JS全局环境创建的执行时间的时间只在主页面根据页面结构独立编写预先展示页面结构进行视觉暂留提供更好的交互感官只在页面结构变化时进行修改维护成本相对较低
骨架屏的作用主要是在网络请求较慢时提供基础占位当数据加载完成恢复数据展示。这样给用户一种很自然的过渡不会造成页面长时间白屏或者闪烁等情况。 常见的骨架屏实现方案有ssr服务端渲染和prerender两种解决方案。 详细使用见本人文章亲测vue-cli项目添加骨架屏多种方式自动生成骨架屏 PS:
一些开发经验或习惯可以参考文章https://blog.csdn.net/crazywoniu/article/details/73480344
可以学习的有
v-showv-if 选择哪个 v-if因为减少了 dom 数量加快首屏渲染v-if是懒加载当状态为true时才会加载并且为false时不会占用布局空间v-show是无论状态是true或者是false都会进行渲染并对布局占据空间对于在项目中需要频繁调用不需要权限的显示隐藏可以选择使用v-show可以减少系统的切换开销。。尽量不在模板里面写过多的表达式与判断 v-ifisShow isAdmin (a || b)这种表达式虽说可以识别但是不是长久之计当看着不舒服时适当的写到 methods 和 computed 里面封装成一个方法这样的好处是方便我们在多处判断相同的表达式其他权限相同的元素再判断展示的时候调用同一个方法即可。循环调用子组件时添加 key如 (item, index) in arr然后 :keyindex来确保 key 的唯一性。在列表数据进行遍历渲染时需要为每一项item设置唯一key值方便vuejs内部机制精准找到该条列表数据。当state更新时新的状态值和旧的状态值对比较快地定位到diff。组件内样式命名尽量采用简短的命名规则不需要 .header-title__text 之类的 class直接 .title 搞定。全局的样式文件尽量抽象化既然不在每一个组件里重复写就尽量通用这部分抽象做的越好说明你的样式文件体积越小复用率越高。建议将复写组件库如 Element 样式的代码也放到全局中去。尽量不使用 float 布局之前看到很多人封装了 .fl -- float: left 到全局文件里去然后又要 .clear现在的浏览器还不至于弱到非要用 float 去兼容完全可以 flexgrid 兼容性一般功能其实 flex 布局都可以实现float 会带来布局上的麻烦用过的都知道不相信解释坑了。尽量保持每个组件 export default {} 内的方法顺序一致方便查找对应的方法。我个人习惯 data、props、钩子、watch、computed、components。props 父子组件传值时尽量 :width :heigth 不要 :option{}细化的好处是只传需要修改的参数在子组件 props 里加数据类型是否必传以及默认值便于排查错误让传值更严谨watch 和 computed 用哪个计算属性主要是做一层 filter 转换切忌加一些调用方法进去watch 的作用就是监听数据变化去改变数据或触发事件如 this.$store.dispatch(update, { ... })computed 中不能依赖一个计算结果去计算另一个计算值因为computed中计算值是异步的可能会报错undefined。当watch的数据比较小性能消耗不明显。当数据变大系统会出现卡顿所以减少watch的数据。组件分类我习惯性的按照三类划分page、page-item 和 layoutpage 是路由控制的部分page-item 属于 page 里各个布局块如 banner、side 等等layout 里放置多个页面至少出现两次的组件如 icon, scrollTop 等组件尽量实现 高内聚低耦合vuex状态过大时可以使用官网提供的模块化方案vuex使用建议尽量跑完完整的闭环是 store.dispatch(action) - action - commit - mutation - getter - computed为方便后期管理在我的组件里只出现 dispatch 和 mapGetters其余的流程都在名为 store 的 vuex 文件夹里进行。SSR(服务端渲染)如果项目比较大首屏无论怎么做优化都出现闪屏或者一阵黑屏的情况。可以考虑使用SSR(服务端渲染)vuejs官方文档提供next.js很好的服务端解决方案但是局限性就是目前仅支持Koa、express等Nodejs的后台框架需要webpack支持。目前自己了解的就是后端支持方面vuejs的后端渲染支持php其它的不太清楚。参考文章
浅谈 Vue 项目优化https://blog.csdn.net/crazywoniu/article/details/73480344
vuejs项目性能优化总结https://www.jianshu.com/p/41075f1f5297
关于vue在app首次加载缓慢的解决办法https://www.jianshu.com/p/6262772bdc9c
图片懒加载和预加载https://www.cnblogs.com/rlann/p/7296660.html
vue-lazyload 使用https://www.cnblogs.com/xyyt/p/7650539.html
vue骨架屏官网https://github.com/lavas-project/vue-skeleton-webpack-plugin
vue-element-loading: https://biigpongsatorn.github.io/#/vue-element-loading
