通常来讲前端性能优化是指从用户开始访问我们的网站到整个页面完整的展现出来的过程中，通过各种优化策略和优化方法让页面加载的更快，让用户的操作响应更及时，给用户更好的使用体验。 这里我们介绍的是前端性能优化知识的解决方案，从静态资源优化开始入手，从表象深入体系化的讲解页面渲染架构，…

PRPL 是一种用于结构化和交付 Web 应用程序和渐进式 Web 应用（PWA）的模式，重点在于改进应用的交付和启动性能。这个模式包含一组步骤，以实现快速、可靠、高效的加载： Push, 推送初始路由所需的所有资源，并且只推送这些资源，以确保它们尽早可用。 Render, 在…

说白了vite就是为开发者量身定做的一套先进的开发工具，按需编译、热模块替换等特性使我们开发时免除了重新打包的等待时间，开发体验丝滑，默认还整合了vue3，是居家旅行、杀人灭口之必备良药。目前vite已经是正式版，相关的生态正在迅速繁荣起来，我也第一时间在工程化方面做了一些探索…

整个酷家乐主站有 100+ 页面，而且所有的页面都在同一个业务 repo 里，并且按照所属业务的不同划分了不同的页面目录，比如户型库、酷家乐大学等等，我们有着统一的 def-cli 命令行工具，它提供了工程开发各个生命周期（dev、build、deploy等）的支持，比如在命令…

大家都知道 webpack 的 Entry 都是 js，如果想输出 css 文件只能在 js 文件里导入 css，所以很多人都会想要是 entry 也可以是 css 那多好，这样就可以任意输出 css 。那么问题来了：怎么让 webpack 支持 css 作为 entry 呢？

ES2015+ 有各种新特性（语法糖），尽管有很多特性尚未纳入标准或浏览器还没有原生支持，但是 Babel 的出现让前端程序员可以不用担心兼容性问题而使用处于各种 stage 的 ES2015+ 语法。其实 class 关键字目前只是实现类的语法糖，但是可以帮助我们屏蔽掉每次实

翻译和整理自 Google Developer Day China 2018 by Jake Archibald, 2018.9.21。个人认为是整个 GDD WEB 方面最有技术含量的讲座。 另外：本文的内容是浏览器的事件循环，并不是 nodejs 的事件循环，不要将两者混淆…

Webpack 的本质就是一个模块打包器，工作就是将每个模块打包成相应的 bundle。 如果小伙伴懒得敲，那可以看上面仓库的最终代码。 下面分 3 章尝试这个内容。 也就是说我们执行到 message.js，但是它里面的内容没法运行，因为 import 是 ES6 内容嘛。 …