深受年轻人喜欢的手Q游戏分发中心、会员特权中心、个性化装扮商城，页面需要load大量动态数据，为了提高H5首屏的加载速度，腾讯手Q团队研发的轻量级高性能Hybrid框架VasSonic应运而生。

——本文是对之前同名文章的修正，将所有webpack3的内容更新为webpack4，以及加入了笔者近期在公司工作中学习到的自动化思想，对文章内容作了进一步提升。 作为互联网项目，最重要的便是用户体验。在举国“互联网+”的热潮中，用户至上也已经被大多数企业所接收，特别是在如今移动…

一. 什么是Tree-shaking 上图形象的解释了Tree-shaking 的本意，本文所说的前端中的tree-shaking可以理解为通过工具"摇"我们的JS文件，将其中用不到的代码"摇"掉，是一个性能优化的范畴。具体来说，在 webpack 项目中，有一个入口文件，相当…

1.0时代没什么说的，html、css打天下的时代，那个时候你会用js开发个计算器就牛逼到不行。2.0时代是最好的时代，新技术、新思想蓬勃发展，堪称前端的工业革命，前端人员的地位得到了充分认可，门槛也有一定的提升。前端性能优化的涉及点从服务器到协议再到宿主环境本身都要有比较深刻…

这是一个存在很久的历史问题了，对于这样一个具有普遍性的问题浏览器偏偏没有给出解决方案，what？没有方案还聊个什么？ 别急，别急，接下来我们一起来扒一扒关于软键盘高度和 input 的问题

本系列文章将以一个实际项目作为研究对象，探讨离线可用这个 PWA 的重要特性在 SSR 架构中的应用思路。最后结合 Vue SSR 进行实际应用。 本文作为第一部分，以 PWA-Directory__ 为例。这是一个陈列 PWA 项目的站点，同时展示项目 Lighthouse …

简单来说，热更新一般是指手机里的app有小规模更新，以直接打补丁的形式更新。 相对应的，另一种更新方式就是下载新的安装包，重新安装。 所以热更新在手游里头是比较常见的，毕竟游戏应用个个都几百兆起步。 按上面那个说法，Web应该是不存在热更新的。 所以在网页这一块是无法推送补丁让…

在这个前端用户体验越来越重要的时代，你的页面稍微有点卡顿，都难以挽留用户。而作为一名有追求的前端，势必要力所能及地优化我们前端页面的性能。今天，就来谈一谈那些前端性能优化的加载技术，利用这些技术可以很好地提高网站的响应速度和用户体验。 页面渲染 在理解真正的优化技术之前，我们需要…