更好的 React SSR

2022-09-26 · 6,561 chars · 33 min read

前段时间,我无意中看到了一个新框架:Fresh。宣称是下一代 Web 框架。它列举了很多功能亮点,随便看了几眼没太在意,但有一段话成功的吸引了我:

The single biggest architecture decision that Fresh makes is its usage of the islands architecture pattern. This means that Fresh applications ship pure HTML to the client by default. Parts of server-rendered page can then be independently re-hydrated with interactive widgets (islands). This means that the client is only responsible for rendering parts of the page that are interactive enough to warrant the extra effort. Any content that is purely static does not have related client-side JavaScript and is thus very lightweight.

简单理解就是:Fresh 使用了 Islands Architecture,程序响应给客户端的都是纯 HTML,然后,通过可交互的 widgets 对 SSR 的部分内容进行水化(re-hydrated),静态的部分不需要任何 JS 代码。—— 简直是完美!!

为何这么说呢?这还得从性能优化和 SSR 讲起...

Awesome Command-line Utilities

2018-07-09 · 2,831 chars · 15 min read

近年来,在 Node.js 的推动下,前端技术大放异彩,告别“石器时代”,进入“工业时代”。随着前端项目复杂度的不断加深,工程化、规范化、自动化等主题,摆在了所有前端开发者的面前,而这些主题无不例外都是构建在以 Node.js 为基础的工具上的。

在最近的实践过程中,发现了不少好用的库。在这里集中整理,推荐给大家,帮大家省去一些搜索和试用的时间。

下面推荐的库大部分都是我使用过的,可能还有同类型更好的选择,欢迎大家补充。

JavaScript 中的位运算和权限设计

2019-03-30 · 3,702 chars · 19 min read

1. 内容概要

本文主要讨论以下两个问题:

  • JavaScript 的位运算:先简单回顾下位运算,平时用的少,相信不少人和我一样忘的差不多了
  • 权限设计:根据位运算的特点,设计一个权限系统(添加、删除、判断等)

Yield Points

2022-11-02 · 1,063 chars · 6 min read

前端性能优化的关键之一,就是避免长任务(Long Task),尽可能的将长任务拆分为若干个小的任务,使得浏览器可以响应用户操作等高优先级的事情。以往任务的拆分,最简单粗暴的方式就是使用 setTimeout,比如:

fun1()

setTimeout(() => {
  fun2()
}, 0)

这样可以确保 fun1fun2 在两个独立的 Task 中(注意必须是 setTimeout 等 macrotasks,microtasks 不行)。这样虽然可以一定程度上解决问题,但是看着比较丑,逻辑也会被拆的很乱。

Fresh 快速入门

2022-09-12 · 3,165 chars · 16 min read

前段时间因为 Islands Architecture 的原因,了解了一下 Fresh,整体感觉还是不错的,设计思路很棒,简洁而高效。虽然还有部分功能缺失,目前也很难在企业级应用开发中使用,但是了解其基本功能和架构设计,对我们开阔思路、突破桎梏还是大有裨益的。所以,这里梳理一份快速入门的文档,分享给大家,希望多少能有些帮助。

Islands Architecture

2022-08-02 · 1,748 chars · 9 min read

本文来自 Preact 作者 Jason Miller 的博客

原文地址:https://jasonformat.com/islands-architecture/

我很难在网上找到这方面的参考资料,但今年在描述本文提到的这些方法时,听到这个名字被多次使用。据我所知,“Component Islands” 模式是由 Etsy 的前端架构师 Katie Sylor-Miller 在 2019 年的一次会议上提出的。

Islands Architecture 的总体思路非常简单:在服务端渲染 HTML 页面,并在高度动态的区域周围,注入占位符或插槽。这些占位符/槽包含了服务端渲染的 HTML 输出,来自其相应的小部件。它们表示的区域可以在客户端 “水合” 为小型的独立部件,重新使用其服务端渲染的初始 HTML。

使用 Cloudflare Pages 部署静态网站

2022-07-06 · 1,765 chars · 9 min read

2021 年底的时候,我通过 web archive 找回了所有网站页面,重新整理并使用 react + SSG 的方式,搭建了当前这个站点。最开始的时候是部署在 vercel 上的,整体用起来还是很方便的,但是访问速度比较尴尬,按照 vercel 官方的说明改了 DNS 解析,结果我测试发现,国内无代理可以直接访问,但是香港却不行...

webpack5 升级记录

2021-03-15 · 1,108 chars · 6 min read

升级

webpack 5 发布已经挺久的了,但是项目使用的部分核心库,没有配套升级。所以一直 pending 到现在。

具体过程不细说,每个项目的配置不同,可能问题也不同。我把我遇到的问题记录在了文章结尾,供大家参考。