最近有空把公司的项目升级到webpack5，顺手记录下一些改造的流程。

自前端进入现代化时期以来，状态管理就是个经久不衰的话题。这篇文章就以react这个经典的前端框架为切入点从头理一理状态管理方案的发展历程。

组内做的一个分享，把文字稿搬过来存一下。

最近几周没时间写博客，主要是一直花时间(顺便补了打越的999)在整理这个在公司内部分享用到的一个ppt以及文稿，做分享的一个目的是安利一下我写的框架，也算是来b站半年来主要花时间做的东西。另一个目的就是相当于一个总结与记录吧，学到的以及用到的知识只有总结成体系才不容易忘。第一次分享会也结束了，文稿基本定型，所以在博客这里分享给大家。内容比较多，分成上下两篇。

下篇谈平台设计大概需要注意哪些东西。

同为程序员，在细分工种下，前端和其他方向的一个最大的区别就是除了写代码之外，还要和视觉层面上的图形打交道，对我来说这也是前端最大的魅力，因为我深知图形之美以及其奥妙之处。不过并不是所有前端都会深入图形领域，但对于所有前端来说有一门图形相关的入门课倒是必修的，那就是图标管理了。

目前一个前端项目最通用的开发流程都是从npm init或者cli开始，完成于npm publish，未来的迭代都以这样一个包为原子单位。但当某些包之间的关联越来越紧密并耦合时，粒度或许就有更多的划分思路了。这篇文章就从lerna谈谈monorepo这个思想，供合适的场景考虑。

最近Serverless这个概念异常火热，感觉是哪家公司都在搞，但具体怎么搞怎么落地的，大多也属于探索阶段。概念很美好，但其中可见的坑也不少。跟风不可取，场景合适的才是最好的，所以要想用好Serverless，必须先了解下相关生态和现状，这篇文章就记录下我粗浅的理解。

node本身虽然是一门后端语言，但和前端的联系还是相当紧密的，基本上渗透到了日常使用中，玩法也是多种多样。工程化，中台服务，命令行工具等等。这篇文章就从vue-cli入手，学习一下node在命令行工具开发中的应用以及相关生态。虽然vue-cli3已经发布很久了，但考虑到其插件服务的架构是重点，相对来说vue-cli2的node命令行开发更纯粹一些，也比较全面的涵盖日常cli开发的工具和思路，所以就从版本2开始吧。

上篇文章分析了渲染器的注册和调用，那么渲染器在工作过程中免不了要处理数据持久化和相互之间通信的问题。这篇文章就谈谈amis在这方面的处理方式。

入职一星期，做了几个项目组的常规需求，顺便过了一下小组项目的整体代码，发现的一个比较明显的问题就是由于项目本身的特点，前端的重复业务逻辑比较多，导致有大量copy&paste出现，应该需要一个减少重复逻辑上投入人力的方案。就是本文想谈到的一个思想了——完全声明式编程。

现代前端没人不知道React，但和React同期出现的一个强大工具了解的人却不多。这个工具可以和React完美配合，但不完全属于React生态圈，也可以独立使用，那就是Immutable.js。其强大之处在于补全了JS中难以实现不可变数据结构的问题，而不可变数据结构又是组件化的精髓之一。这篇文章就谈谈Immutable的应用。

如果把一个应用比作人体，数据就相当于人体中的血液。无处不在，同样也无比重要。通过监控数据并分析其中带给我们的信息，能为应用的迭代或改进提供可靠的依据。

目前最主流的前端方案都是以组件为基本单位构建一个单页应用程序，通过REST API和后端交互，最终将所有前端代码打包为静态资源部署，如果有SEO需求，会采用服务端渲染方案，前后端分别打包再做同构。这套方案确实能应付绝大多数中小型应用场景，但量变会产生质变，随着业务发展，前端会越来越臃肿，可能组件=>应用的结构会慢慢演变成组件=>服务=>应用，不同的服务由不同的项目组负责开发，甚至会有接入完全不同技术栈的服务的需求，作为这个大型单页应用的一部分，至此不同服务之间就会有不小的沟通成本，代码编译打包性能，开发体验也会迅速下降，急需一种更有层次的解耦方案。受到后端微服务的启发，前端微服务架构也就应运而生。

最近学习计算机网络的时候才了解到RPC这样一个重要概念，想起来之前工作中维护的一个浏览器拓展的工作机制也是建立在该原理之上的，同时RPC也是构建分布式应用的重要理论基础，有必要体系化的总结一下。

相比于Vue的高度封装和自动化，React给予了开发者更高的自由度，但相对的，就要更注重性能优化相关的问题，这里就以React为入口总结一下前端应用开发中需要注意的一些常规性能优化点。

我们知道常规单页应用最终都会被webpack打包为若干js，css，入口html和各种静态资源，从http请求到入口html资源到整个应用准备完成经历了不少阶段，这篇文章就按照时间顺序分别介绍其中可优化的点。

当完成数据的响应化后，后续就要通过对该数据的订阅完成依赖收集及响应等相关操作。这部分内容核心入口就是数据被劫持的get和set方法。本文就重点分析这一部分内容。

最近迭代博客过程中遇到一个诡异bug，webpack升级到4后，在生产模式下vue-router匹配到异步组件后无法触发onReady钩子方法。严重怀疑是vue-router的问题，正好借这个机会看看vue-router的源码好了。

上文中分析了vue-router的初始化流程，这篇文章就以其工作方式为线索分析相关源码的运作。

镜像是容器运行的基础，直接使用镜像库的镜像虽然可以满足一定需求，但通常针对自己的项目还是需要手动定制镜像，这就是Dockerfile的功能了。本文总结一下编写Dockerfile的一些注意事项。

目前浏览器已经提供了不少存储相关的API，比如localStorage,application cache等，以及各种缓存相关的策略，memory cache, disk cache等。这些方案各有优缺点，但无论哪种方案要实现精确的强缓存都存在难度，不可避免的耦合缓存检测相关的代码到主代码中。而基于Service Worker的缓存解决方案可以将检测与缓存逻辑和主代码完全解耦，并利用浏览器本身的特性平滑的控制缓存文件。

平时前端虽然没什么机会用Node写后端业务，但在前端工程化中，一定离不开Node的模块管理。最近计划从Node开始学后端相关的一些思想，第一篇文章就从距离前端最近的点开始。

这篇文章用来梳理Webpack使用各个流程中常用的一些插件并长期更新，以便以后使用的时候能够快速索引。

loader和plugin可以说是Webpack的两大支柱功能了。相较于loader专注于模块类型的转化，plugin提供了更为广阔的功能，原因就在于其能直接通过编译生命周期钩子影响webpack编译流程，实现强大的自定义功能拓展。这篇文章就来分析下plugin的运作原理。

前端发展这么多年来，由于babel,webpack等工程化工具的快速发展，JS的模块化管理能力已经远远强于CSS，另外也有很大一部分原因在于JS本身作为一门编程语言就有自己的作用域，而CSS本身的特性决定了其规则都是全局作用域。但如果要实现项目的工程化，这又是不得不解决的一个难点，下面针对CSS发展以来一些比较流行合理的模块化方案分别做一个思路梳理。

从今天起开始梳理前端工程化和自动化相关的一些知识，先从测试相关的部分写起。当然在正式使用工具编写前端测试之前，我们有必要先了解测试究竟是什么，写测试的目的等等相关的背景知识，第一篇文章就从这里说起。

前端开发最初只需要使用JS实现一些基本的交互效果，所以早期一般在script标签中嵌入一些代码既可以达到要求。但随着各种WEB应用的兴起,JS的地位越来越重要，文件越来越复杂，一个项目里的文件势必要有良好的管理。模块化思想也就应运而生。