谈谈vue及webpack在项目中的一些优化

前言

我觉得前端性能优化是前端工程化的一部分,做前端性能优化有很多可以做的地方,我在很久之前写过一些文章,可以在博客搜索优化,查看相关文章。其实很多性能优化的地方都要把我一个最佳的度。今天主要写一下vue及webpack在项目中的一些优化。

vue项目中的性能优化

其实vue的性能本身就是很good了,要说再进一步优化,可能有一下几个注意点,仅仅是注意点哦!

1、不要在模板里面写过多表达式

如下:

v-if="isShow && isAdmin && (a || b) "

{{haorooms?haorooms:(resource?resource:"haoroomsresource")}}

前端性能优化之缓存利用

前言

越来越多的公司开始做PWA,渐进式web应用了。我的博客源码是2014年年初写的,近期有时间正准备优化一下,也改成PWA的web应用。关于PWA渐进式web应用,我在博客改版之后再来详细介绍!今天主要详细介绍一下性能优化之缓存利用,本文将详细介绍各种缓存,及其机制,前段时间我也写过一篇关于前端浏览器缓存的文章,在我博客中搜索缓存,也能搜到几篇文章,感兴趣的可以先去我之前文章去看一下,本文将详细介绍缓存及如何利用。

缓存种类

大体想了一下,关于缓存,无非有如下几种:

【译】vue技术分享-你可能不知道的7个秘密

前言

本文是vue源码贡献值Chris Fritz在公共场合的一场分享,觉得分享里面有不少东西值得借鉴,虽然有些内容我在工作中也是这么做的,还是把大神的ppt在这里翻译一下,希望给朋友带来一些帮助。

一、善用watch的immediate属性

这一点我在项目中也是这么写的。例如有请求需要再也没初始化的时候就执行一次,然后监听他的变化,很多人这么写:

created(){
    this.fetchPostList()
},
watch: {
    searchInputValue(){
        this.fetchPostList()
    }
}

上面的这种写法我们可以完全如下写:

watch: {
    searchInputValue:{
        handler: 'fetchPostList',
        immediate: true
    }
}

es6中常用的字符串、数组、对象的扩展及应用

前言

目前前端开发流行框架,react,vue,angular以及微信小程序等等,都是对数据的操作,其实es6中对字符串、数组、对象的扩展,对于我们更简单的操作数据提供了方便。今天主要总结一下我项目中主要用到的es6对这些扩展的应用。当然,es6对函数的扩展及其他应用也很重要,关于这些应用,请关注我后面的文章。

includes方法

在e6字符串和数组中,多了一个includes()方法,这个方法我在项目中经常用到。

有人说includes()方法完全可以用indexOf取代,但是indexOf有几个缺点:

一是不够语义化,它的含义是找到参数值的第一个出现位置,所以要去比较是否不等于-1,表达起来不够直观。

二是,它内部使用严格相等运算符(===)进行判断,这会导致对NaN的误判。

[NaN].indexOf(NaN)
// -1

但是includes就可以解决这个问题!

[NaN].includes(NaN)
// true

该方法的几个例子:

淘宝网性能优化之借鉴——webp及Bigpipe

前言

说到性能优化,我博客前面文章讲了不少,其实性能优化做的好坏,直接体现前端开发人员的水平。因此,很多面试中基本上都会提及这一点。今天主要借鉴淘宝网性能优化方式之一webp及Bigpipe 进行简单的讲解。

webp

打开淘宝网,假如你是chrome浏览器,你会发现,所有图片都是webp结尾的,淘宝网图片运用了webp。假如你是safari浏览器,看到图片就是jpg或者png了,淘宝网自动判断浏览器支持不支持webp,假如支持,则输出相应的图片格式!

看下图:

enter image description here