patterns 中文版 📝

提升你的 web 应用架构能力

关于 patterns.dev

本仓库所有文章转译自 https://www.patterns.dev/ 。该网站是有来自 google 的工程师 Lydia Hallie 和 Addy Osmani 共同创建，以现代视角呈现 js 设计、渲染和性能模式等相关主题，旨在帮助大家提升 web 应用的架构能力。

关于本站

本站是 https://www.patterns.dev/ 文章的中文翻译，旨在通过翻译进行学习，同时也可以帮助中文社区中的同志共同进步。

文章内容还在持续翻译中，欢迎大家提交 pr，跟我一起贡献自己的力量。

如发现有翻译错误或不到位的地方，也欢迎提交 pr。

目录

1. 设计模式 Design Patterns

• 介绍 Introduction
• 单例模式 Singleton Pattern
• 代理模式 Proxy Pattern
• 提供者模式 Provider Pattern
• 原型模式 Prototype Pattern
• 容器模式 Container/Presentational Pattern
• 观察者模式 Observer Pattern
• 模块模式 Module Pattern
• 混合模式 Mixin Pattern
• 中介者模式 Mediator/Middleware Pattern
• 高阶组件模式 HOC Pattern
• Render Props 模式 Render Props Pattern
• 勾子模式 Hooks Pattern
• 轻量模式 Flyweight Pattern
• 工厂模式 Factory Pattern
• 复合模式 Compound Pattern
• 命令模式 Command Pattern
• 学习 js 设计模式 Learning JavaScript Design Patterns

2. 渲染模式 Rendering Patterns

• 介绍 Introduction
• Reactjs 概览 Overview of React.js
• Nextjs 概览 Overview of Next.js
• 客户端渲染 Client-side Rendering
• 服务端渲染 Server-side Rendering
• 静态渲染 Static Rendering
• 增量式静态生成 Incremental Static Generation
• 渐进式水合 Progressive Hydration
• 流式服务端渲染 Streaming Server-Side Rendering
• React 服务端组件 React Server Components
• 选择性水合 Selective Hydration
• 孤岛架构 Islands Architecture

3. 性能模式 Performance Patterns

• 优化加载顺序 Optimize your loading sequence
• 静态导入 Static Import
• 动态导入 Dynamic Import
• 可见时导入 Import On Visibility
• 交互时导入 Import On Interaction
• 基于路由的代码分割 Route Based Splitting
• 打包分割 Bundle Splitting
• PRPL 模式 PRPL Pattern
• 树摇优化 Tree Shaking
• 预加载 Preload
• 预读取 Prefetch
• 第三方加载优化 Optimize loading third-parties
• 列表虚化 List Virtualization
• js 压缩 Compressing JavaScript