如何优化我们的代码(vue项目)

原创 Fly丶 随笔 vue专题 176阅读 2019-04-30 13:58:58 举报

前言

作为一个前端,可能绝大多数的时间都是在写的业务代码,时间一长,大家会觉得乏味、没意思等等,但是其实就算只是写业务代码,我们也依然能够找到有兴趣的点,说的简单一点就是代码优化,不仅仅局限在业务逻辑这块,像是代码复用、效率等等都是我们可以加以改进的地方,学会在业务代码中找到不足,总结经验,这样日积月累,量变产生质变,必然我们的技术也是不断再上升的。今天其实就是说下我在vue项目中进行的一些总结或者是经验,如果有错误的地方也是欢迎大家指正。

1.兼容IE11

用过vue的同学们应该都比较清楚,vue其实是可以兼容ie9的,但是这种兼容并不是说,你写了一个项目,打开ie9就能兼容了,是需要用工具将代码进行转换的。我之前也是这样以为的,直到近期一个项目完成之后,打开ie11,发现页面显示正常的,但是所有的http请求都是无效的,经过了一番查找,才知道这个babel-polyfill的包的用处,当然知道的同学可以略过啦,不知道的话,跟着我继续往下看

我们使用现代浏览器的话,很多像是es7、es8的语法,可能都是已经支持了,但是放在ie上,这些方法都是通通不认识的,因此我们就需要一个工具来将这些ie浏览器不认识的语法转换成ie所认识的,那么知道了这个babel的包,其实就很简单了,我们直接这样在vue中的main.js中引入这个包即可

但是这样引入的话,在打包的时候,包可能会比较大,会影响到前端页面的打开速度,所以又出现了一种按需转译的用法,即当我们需要用到转译代码的时候,会替我们转译,并不是一次转译所有的代码,这种用法同学们应该也是非常熟悉了,就是所谓的“懒加载”,和vue的路由懒加载是一个道理,那么如何使用呢,首先下载的是一个@babel/polyfill的包,这个包的话也是一个翻译代码的作用,但是可以进行配置来实现按需加载

然后我们需要在babel.config.js中进行按需加载的配置

注意这个@babel/preset-env是一个有关环境变量的包,这个包在你使用vue脚手架3.0创建项目时就会自带这个包了,所以是不需要下载的,最后在main.js中引入我们之前下载的包就可以了。

这样就大功告成了,打包的话也可以看到打包体积变小了

对比可以看到体积小了20kb,但是问题来了,明显在主包中文件体积过大,已经1.5M了,这个体积页面首次打开的时候,可能会需要3-10秒的时间,用户体验肯定是极差的,所以下面我们也说到如何按需加载我们的组件,注意我们vue项目使用的是ant-design-vue的ui框架,所谓按需加载组件,就是我们项目中用到了这个组件才导入这个组件,没有用到的话,就不要将这个组件的内容打包进去,也包括组件的样式。

2.按需打包组件

其实关于按需打包我们需要的组件,很多组件也介绍如何按需使用,ant-design-vue也提供了这些内容,想要详细了解的同学可以点开链接查看文档,这里也是简单说一下,首先需要下载babel-plugin-import的插件,然后需要在babel.config.js中进行如下配置

之后的话,我们就不能全局引入组件了,而是引入我们项目中所用到的一些组件,可以将这些引入的组件单独放入一个js文件中,这样方便以后添加组件

然后我们再来打包看看此时的文件大小

一下子少了近500kb,是不是好了很多呢,当然如果包体积还是比较大,这个时候我们可以考虑将一些依赖排除在打包当中,使用external的配置,这里就不多说了,有兴趣的同学可以自己试试。

3.自定义组件的v-model指令

说完了如果优化打包,我们再来看看如何提高我们的代码质量。v-model这个指令相信大家也都用过,它双向绑定的机制是不是非常省事呢,如果我们自己要实现一个v-model绑定又该如何做呢,比如我们需要监听某个富文本编辑器内容的变化,获取内容以及保存富文本的内容,这个时候就刚好用上自定义的v-model

其实关键就在model属性上,定义了父组件传过来的props,以及发生变化的事件名称,需要注意的地方在于,当内容发生改变时,我们不能将改变后的值赋给props属性,因为vue中默认是单向数据流,props的值只能是由父组件来改变,这样的话,我们就能轻易的监听这个富文本编辑器的值,而不用去用watch监听或者是其他的方法来实现,这个实现的方法在vue的文档中也有提到,大家也可以去文档查看详情。

4.条件语句优化

在我们的项目中肯定是有无数的if条件语句的代码,如果条件嵌套不多的话,那没什么问题,如果嵌套过多过深,就会导致代码难以理解,维护困难,因此针对条件语句的优化也是势在必行的,这里也是参考了很多大佬们的文章,吸取他们的经验,使用一些比较常用的方法来优化条件语句,比如错误优先处理return

这样一个表单验证的方法,当如果发生错误时,直接提示错误信息,然后退出验证,少了一个else的代码块,代码更少一些,而且也很容易理解

另外比较常用的就是利用三目运算符,以及短路操作符“&&”和“||”,比如

除此还有上面文章中提到的更复杂的条件判断,使用新的数据结构Map来进行判断,而所有这些条件语句,都是我们代码当中需要优化的地方。

5.解构赋值以及函数默认值的应用

解构赋值是ES6当中的内容,现在ES10都已经出来了,如果ES6还没有用上的话,那就显得我们前端太low啦,当然这只是开个玩笑,不过ES6所带来的解构赋值以及函数默认值都是能够简化我们的代码,使代码更容易理解,所以既然我们学习ES6了,那么就必须要学以致用。

解构和函数默认值看起来好像比较复杂,但是用熟悉了以后,会发现少写了很多代码,并且代码看起来也是一目了然,同时默认值还帮助我们省去了关于参数的判断,是不是非常的方便的呢。

6.在vue中使用JSX

一直以来,我以为只有react中才能使用JSX,后来发现其实我们在vue中也能使用JSX,需要注意的是JSX在vue中和react中还是有一点区别的,这里不会具体说这些区别,只是告诉大家,遇到一些复杂的组件,可以去尝试使用JSX来写,也是一种解决问题的方法

JSX在vue中,是写在render()钩子中的,直接返回return一个JSX对象就可以了,网上也有关于vue中的JSX怎么使用,大家可以去搜搜。

最后

为了帮助大家让学习变得轻松、高效,给大家免费分享一大批资料,帮助大家在成为全栈工程师,乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈:866109386.欢迎大家进群交流讨论,学习交流,共同进步。

当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。

但最重要的是不知道哪些技术需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有有效资源还是很有必要的。

最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们,祝福大家在往后的工作与面试中一切顺利。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复