Vue项目性能优化是个老生常谈的问题了,本人开发过程中也查过很多关于Vue项目优化的文章,每篇文章说的都差不多,本章我就结合我的心得和大家的智慧做一个总结。
1.懒加载
懒加载应该是提高性能的最简单有效的方式了,一个项目加上懒加载速度和逼格都会上一个台阶。懒加载的意义在于按需加载,不会让项目刚开始运行速度就很慢,能大大的优化用户体验。Vue项目懒加载分为图片懒加载和路由懒加载,具体写法如下:
(1)路由懒加载
{
path: '/home',
name: 'home',
component: resolve => require(['@/components/home'],resolve)
},{
path: '/index',
name: 'Index',
component: resolve => require(['@/components/index'],resolve)
},{
path: '/about',
name: 'about',
component: resolve => require(['@/components/about'],resolve)
}
(2)图片懒加载
<!--使用前需先安装配置vue-lazyload-->
<a href="javascript:;"><img v-lazy="'/static/img/abc.jpg'"></a>
2.代码优化
代码优化是一个项目优化的核心,不仅能提高项目质量和用户体验,同时还能让项目更容易维护,代码优化主要有一下几个方面:
(1)功能重复组件和函数封装,提高代码复用率
组件封装这点非常重要,但是也常常被人忽略,之所以这么说是因为组件封装不仅能提高开发效率,还能减少以后维护成本。例如;一些级别比较高的程序员会在开发之前设计好一些常用组件库,现成的(东北话)组件会让其他人大大增加开发效率、如果需要修改和优化只需要修改一处就好,不至于牵一发而动全身。中等程序员则是在开发过程中把重复组件提出来进行组件封装;那最低级程序员则是根本没有这方面的意识。如何提高组件封装的意识才是解决的根本所在。
(2)尽量减少本地存储的使用
尽量减少本地存储(localStorage、sessionStorage、cookie)的使用也是提高性能的方式之一,有些小伙伴喜欢用本地存储传参,传参的方式有很多种,比如:路由传参或者vuex等
(3)减少watch使用 v-if和v-show使用要有原则
watch监听大量状态时会让浏览器出现卡顿现象,所以尽量减少使用。v-if和v-show的区别是;v-if是不渲染,而v-show是渲染不显示,至于如何使用视情况而定
3.用户体验优化
(1)添加Loading
当用户需要等待时间较长时,必须添加等待loading,这个不多说,用处大大地
(2)路由逻辑
路由逻辑是一个项目的核心,如果路由逻辑不通的话,用户很有可能点返回按钮的时候一直在两个页面之间跳转,进入死循环。其次,路由逻辑和用户体验息息相关,比如用户下完单应该跳转到订单详情页,而不是首页等等
(3)样式统一
两个页面的相同功能按钮,它的大小颜色如果不用的话就会让人感觉你的App不够专业
(4)滚动组件的使用
网页的原声滚动用户体验不好,我们需要使用一些滚动组件,比如:better-scroll、iscroller、scroller等,滚动组件的使用能让页面滚动更自然,逼格更高
4.webpack打包优化
(1)减去控制台打印和备注
npm install uglifyjs-webpack-plugin -D
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production';
configureWebpack: config => {
const plugins = [];
if (isProduction) {
plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: false,
},
warnings: false,
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log']
}
}
})
)
}
(2)图片压缩
npm install image-webpack-loader -D
//vue.config.js
module.exports = {
// 根据你的实际情况更改这里
publicPath,
assetsDir: 'assets',
lintOnSave: true,
// image 压缩 定义在chainWebpack中
chainWebpack: config => {
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
bypassOnDebug: true
})
.end()}
(3)GZIP 源码压缩
GZIP教程传送门
5.CDN加速
好处:
1.减少包体积
2.能让静态资源加载更快
3.较少首屏渲染时间
4.总结:CDN能让你的项目变快,配合GZIP使用效果更佳。具体教程可以搜索详细的 这里就不赘述了
好了,以上就是总结的Vue项目优化的相关内容,欢迎留言点评