随着2018年2月15号webpack4.0.0出来已经有一段时间了，webpack依靠着“零配置”，“最高可提升98%的速度”成功吸粉无数，对于饱受项目打包时间过长的我，无疑是看到了曙光，于是决定开始试水。 随着项目的不断迭代，样式文件和js文件的数量越来越多，造成webpa…

比如 v-for="user in users" v-if="user.isActive"。在这种情形下，请将 users替换为一个计算属性 (比如activeUsers)，让其返回过滤后的列表 比如 v-for="user in users" v-if="shouldShow…

浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制。 作用是在短时间内多次触发同一个函数，只执行最后一次，或者只在开始时执行…

现代 web 应用经常使用打包工具来创建生产环境的“打包”文件（脚本、样式等等），这些文件经过优化和压缩之后能够极快的被用户下载。在使用 webpack 进行 web 性能优化系列文章中，我们将介绍如何使用 webpack 高效的优化站点资源。这将会帮助用户更快的加载网站以及交…

webpack 是一个优秀的打包工具，其本身为我们做了大量优化，同时也为我们提供了大量的配置项让我们可以自定义，从而有优化空间。 下面我先讲讲vue脚手架为我们做的一些优化，不喜欢看的请跳过，然后会讲如何在优化的基础上升华一下，内容从浅到深，但是所有的方法都经过楼主考证，内容较…

让 2019 来得更迅速吧~你正在阅读的是 2019 年前端性能优化年度总结，始于 2016。 7. 100 毫秒响应时间，60 fps 为了使用户感觉交互流畅，界面的响应时间不得超过 100ms。如果超过了这个时间，那么用户将会认为该应用程序是卡顿的。RAIL，一个以用户为中…

这是个老生常谈的话题了，之所以还搬出来讲讲，原因之一是之前根本就没在意，近期面临的一些问题需要用到这两个小技巧；原因之二，这两个技巧带来的优化不小；原因之三，顺便复习一下闭包。 第一种和第三种情况，事件短时间内被频繁出发，如果在事件中有大量的计算，频繁操作DOM，资源加载等重行…

在前端应用的优化中，对加载资源的大小控制极其的重要，大多数时候我们能做的是在打包编译的过程对资源进行大小控制、拆分与复用。 本片文章中主要是基于 webpack 打包，以 React、vue 等生态开发的单页面应用来举例说明如何从 webpack 打包的层面去处理资源以及缓存，…