精益前端

webpack是一个强大而复杂的前端自动化工具。其中一个特点就是配置复杂，这也使得「webpack配置工程师」这种戏谑的称呼开始流行🤷但是，难道你真的只满足于玩转webpack配置么？ 显然不是。在学习如何使用webpack之外，我们更需要深入webpack内部，探索各部分的…

babel是一个非常强大的工具，作用远不止我们平时的ES6 -> ES5语法转换这么单一。在前端进阶的道路上，了解与学习babel及其灵活的插件模式将会为前端赋予更多的可能性。 本文就是运用babel，通过编写babel插件解决了一个实际项目中的问题。 1. 遇到的问题 最近在…

本文是《PWA学习与实践》系列的第十篇文章。也许你还没有听说过或不了解Resource Hint，但是通过本文，你会快速学习到这一件页面加载性能利器。本系列相关demo的代码都可以在github repo中找到。 PWA作为时下最火热的技术概念之一，对提升Web应用的安全、性能…

无论你是一个想要学习CSS布局的新手，还是一个比较有经验但想要进一步巩固与了解最新CSS布局知识的前端开发者，这篇指南都能帮你全面了解如今CSS布局发展的现状。 在过去的许多年中，正如翻天覆地的前端开发一般，CSS布局也产生了巨大的变化。现在我们有需要可选的CSS布局方式来开发…

CSS是一门几十分钟就能入门，但是却需要很长的时间才能掌握好的语言。它有着它自身的一些复杂性与局限性。其中非常重要的一点就是，本身不具备真正的模块化能力。 1. 面临的问题 CSS中虽然有@import功能。然而，我们都知道，这里的@import仅仅是表示引入相应的CSS文件，…

CSS是一门几十分钟就能入门，但是却需要很长的时间才能掌握好的语言。它有着它自身的一些复杂性与局限性。其中非常重要的一点就是，本身不具备真正的模块化能力。 1. 面临的问题 你可能会说，CSS有@import功能。然而，我们都知道，这里的@import仅仅是表示引入相应的CSS…

CSS是一门几十分钟就能入门，但是却需要很长的时间才能掌握好的语言。它有着它自身的一些复杂性与局限性。其中非常重要的一点就是，本身不具备真正的模块化能力。 1. 面临的问题 CSS中虽然有@import功能。然而，我们都知道，这里的@import仅仅是表示引入相应的CSS文件，…

服务器推（Server Push）是一类特定技术的总称。一般情况，客户端与服务器的交互方式是：客户端发起请求，服务器收到请求返回响应结果，客户端接收响应结果进行处理。从上述的交互过程中可以看出，客户端想要获取数据，需要自主地向服务端发起请求，获取相关数据。 在大多数场景下，客户…

本文是《PWA学习与实践》系列的第九篇文章。 PWA作为时下最火热的技术概念之一，对提升Web应用的安全、性能和体验有着很大的意义，非常值得我们去了解与学习。对PWA感兴趣的朋友欢迎关注《PWA学习与实践》系列文章。 在前八篇文章中，我已经介绍了一些PWA中的常见技术与使用方式…

本文是《PWA学习与实践》系列的第八篇文章。本文中的代码可以在learning-pwa的sync分支上找到（git clone后注意切换到sync分支）。 PWA作为时下最火热的技术概念之一，对提升Web应用的安全、性能和体验有着很大的意义，非常值得我们去了解与学习。对PWA感…

注意打包后的资源依赖与资源引入顺序。 1. 引言 性能优化涵盖的范围非常之广，其中包含的知识也非常繁杂。从加载性能到渲染性能、运行时性能，每个点都有非常多可以学习与实践的知识。 优化问题包含方方面面，优化手段也依场景和具体问题而定。因此，本文并不是一个泛而全的概览文章，而是以之…

1. 引言 使用MongoDB，可以以单机模式提供服务。但在实际的生产环境中，单机模式将面临很大的风险，一旦单点数据库服务出现故障，就会导致服务调用出现错误甚至崩溃。因此，在实际生产环境下，需要对MongoDB做相应的主备处理，提高数据库服务的可用性。 对于提高可用性，一些博文…

本文是《PWA学习与实践》系列的第七篇文章。 PWA作为时下最火热的技术概念之一，对提升Web应用的安全、性能和体验有着很大的意义，非常值得我们去了解与学习。对PWA感兴趣的朋友欢迎关注《PWA学习与实践》系列文章。 本文中的代码可以在learning-pwa的notifica…

本文是《PWA学习与实践》系列的第六篇文章。 PWA作为时下最火热的技术概念之一，对提升Web应用的安全、性能和体验有着很大的意义，非常值得我们去了解与学习。对PWA感兴趣的朋友欢迎关注《PWA学习与实践》系列文章。 前几篇文章介绍了PWA中的一些功能与背后的技术。工欲善其事，…

本文是《PWA学习与实践》系列的第五篇文章。文中的代码都可以在learning-pwa的push分支上找到（git clone后注意切换到push分支）。 PWA作为时下最火热的技术概念之一，对提升Web应用的安全、性能和体验有着很大的意义，非常值得我们去了解与学习。对PWA感…

本文是《PWA学习与实践》系列的第四篇。是我在测试其他demo时遇到的一个问题，算是一篇TroubleShooting。 PWA作为时下最火热的技术概念之一，对提升Web应用的安全、性能和体验有着很大的意义，非常值得我们去了解与学习。对PWA感兴趣的朋友欢迎关注《PWA学习与实…

本文是《PWA学习与实践》系列的第三篇文章。文中的代码都可以在learning-pwa的sw-cache分支上找到（git clone后注意切换到sw-cache分支）。 PWA作为时下最火热的技术概念之一，对提升Web应用的安全、性能和体验有着很大的意义，非常值得我们去了解与…

PWA作为今年最火热的技术概念之一，对提升Web应用的安全、性能和体验有着很大的意义，非常值得我们去了解与学习。 本系列文章《PWA学习与实践》会逐步拆解PWA背后的各项技术，通过实例代码来讲解这些技术的应用方式。也正是因为PWA中技术点众多、知识细碎，因此我在学习过程中，进行…

本文是《PWA学习与实践》系列的第二篇文章。文中的代码都可以在learning-pwa的manifest分支上找到（git clone后注意切换到manifest分支）。 PWA作为时下最火热的技术概念之一，对提升Web应用的安全、性能和体验有着很大的意义，非常值得我们去了解与…