Vue.js 代码优化浅谈

前言

vue之火,不言而喻,框架给前端带来了方便,但是代码的漏洞也会很多。如果不加以注意和优化就会陷入不必要的性能、冗余等问题,所以我们有必要关注优化的重要性,下面我们将把常用的优化做一些总结和探索 我们将从以下几方面着手

优化方向

最佳实践

一、代码优化方向

技术选型没有最好的,只有最适合业务的。目前我们的业务是用gulp+webpack打包构建的。目前有几个痛点:

1、代码冗余。

我们经常引入了一个大的utils库,实际上只是引用了这个库中的一个方法,但是却打包了整个库,代码的冗余和浪费。随着引入的文件越来越多,这种问题也会变得越来越明显。无论是基于代码洁癖,还是代码体积来看,都有优化的必要。

2、异步流程控制。

随着JS前端的发展,我们站着大牛的肩膀上,逐步摆脱了回调地狱,以及各种异步流程的坑。有着目前来看最好的异步流程解决方案「async/await方案」。Node 7.6版本已经正式支持了此特性,Browser端也可以统一,达到前后端同构的目的。清晰的异步流程控制对于团队代码的理解和维护都有着积极的意义。

3、代码洁癖的考虑。

引入箭头函数,简化代码。利用箭头函数不绑定this的特性,解决this「漂移」问题。

二、基础优化

所谓的基础优化是任何 web 项目都要做的,并且是问题的根源。HTML,CSS,JS 是第一步要优化的点

分别对应到 .vue 文件内的,