前端模块化是前端工程化的基石。时下，大前端时代中对模块的运用更是无处不在。 模块应该是职责单一、相互独立、低耦合的、高度内聚且可替换的离散功能块。 模块化是一种分治的思想，通过分解复杂系统为独立的模块实现细粒度的精细控制，对于复杂系统的维护和管理十分有益。模块化也是组件化的基石…

关于什么是tree-shaking可以看这篇文章有一个简单介绍。 简单来说，为了增强用户体验，用户打开页面所需等待的时间是非常重要的一环。而在用户打开页面所需等待的时间，有一部分时间就是用来加载远程文件，包括HTML、JavaScript、CSS以及图片资源等文件。 如图就是淘…

作为前端开发人员，大家众所周知的是一个页面打开的速度对于用户体验和用户流失率来说至关重要，甚至可以说秒开是一个web项目的基本要求。接下来，我将分享一下如何用webpack神器进行web项目的性能优化。性能优化分为两部分，第一个部分是web打开时性能优化，另一个则是webpac…

对于依赖接口渲染的页面，在拿到数据之前页面往往是空白的，为了提示用户当前正在加载中，往往会使用进度条、loading图标或骨架屏的方式。对于前两种方案而言，实现比较简单；本文主要研究骨架屏的应用及实现，并给出一种使用Chrome扩展工具快速生成骨架屏的方案。 首先需要保留节点的…

最近又在搞优化（永远绕不开的优化。。。），在项目中尝试引入了骨架屏，加载体验还是比较好的，就搞了个简单的脚本，支持当前工程模版自动替换，加速开发效率。 骨架屏生成工具使用了 awesome-skeleton ，很强很赞！个人结合项目和使用做了修改和扩展。 其原理是利用 Pupp…

作为与用户联系最为密切的前端开发者，用户体验是最值得关注的问题。关于页面loading状态的展示，主流的主要有loading图和进度条两种。除此之外，越来越多的APP采用了“骨架屏”的方式去展示未加载内容，给予了用户焕然一新的体验。随着SPA在前端界的逐渐流行，首屏加载的问题也…

现在的前端开发领域，都是前后端分离，前端框架主流的都是 SPA，MPA；这就意味着，页面渲染以及等待的白屏时间，成为我们需要解决的问题点；而且大项目，这个问题尤为突出。 webpack 可以实现按需加载，减小我们首屏需要加载的代码体积；再配合上 CDN 以及一些静态代码（框架，…

我们日常使用浏览器的步骤为：启动浏览器、打开一个网页、进行交互。而无头浏览器指的是我们使用脚本来执行以上过程的浏览器，能模拟真实的浏览器使用场景。 本文主要介绍 Google 提供的无头浏览器(headless Chrome), 他基于 Chrome DevTools prot…

虽然写了很长一段时间的Vue了，对于CSS Scoped的原理也大致了解，但一直未曾关注过其实现细节。最近在重新学习webpack，因此查看了vue-loader源码，顺便从vue-loader的源码中整理CSS Scoped的实现。 本文展示了vue-loader中的一些源码…