category

Frontend

共 102 篇文章。
全部文章GameGolangSaasRust游戏开发客户端开发GameDevProductsLua写作小说IndieFrontendPrd
frontend

PWA 与 Service Worker:离线化、缓存策略与服务扩展

系统性 PWA 实战指南:Service Worker 注册与生命周期(install/activate/fetch)、缓存策略(Cache-First/Network-First/Stale-While-Revalidate/Cache-Only/Network-Only)、Workbox 自动化缓存、Background Sync、Push 通知、Web App Manifest、Add to Home Screen(A2HS)、Service Worker 更新机制与版本控制、PWA 与 SPA/SSR 结合。附 Vue/React/Next.js 完整配置。

7 分钟阅读
pwa service-worker workbox
frontend

前端测试策略:单元、E2E、视觉回归与验收测试

系统性前端测试体系建设:测试金字塔分层(单元/集成/E2E)、Vitest/Jest 单元测试实战、Vue Test Utils / React Testing Library 组件测试、MSW(Mock Service Worker)API 模拟、Cypress / Playwright E2E 对比、组件文档与测试结合(Storybook Interaction Tests)、视觉回归测试(Chromatic / Percy)、性能基准测试(Lighthouse CI)、测试覆盖率门禁与 CI 集成、TDD/BDD 实践模式。

6 分钟阅读
testing vitest cypress
frontend

微前端与模块联邦:架构设计与落地实战

系统性微前端技术指南:微前端架构模式(Module Federation / iframe / Web Components / qiankun / single-spa)选型对比、Webpack Module Federation 原理与配置、Vite Module Federation(@originjs/vite-plugin-federation)实战、公共依赖共享与版本冲突解决、跨应用通信、路由整合、样式隔离、qiankun 沙箱与快速启动、微前端 DevOps 与独立部署。附完整架构决策树。

6 分钟阅读
micro-frontend architecture module-federation
frontend

Web 资源加载深度优化:图片、字体、视频、缓存与 CDN

系统性 Web 资源加载优化策略:图片格式选型(AVIF/WebP/JPEG XL)、响应式图片(srcset/sizes/picture)、懒加载(loading='lazy' + Intersection Observer)、字体加载策略(font-display/preload/subset)、视频与 iframe 懒加载、HTTP 缓存策略(Cache-Control/ETag/Last-Modified)、Service Worker 缓存、CDN 边缘加速与缓存规则、资源压缩(Brotli/Gzip)、HTTP/2 Server Push 替代方案(103 Early Hints/Preload)、关键渲染路径优化。

6 分钟阅读
performance optimization images
frontend

Web 性能指标全解析:Core Web Vitals 与真实用户监控(RUM)

系统性解读 Web 性能指标体系:Core Web Vitals(LCP、INP、CLS)的测量原理、优化阈值与实战方案;TTFB/FCP/FID/TBT 等辅助指标;真实用户监控(RUM)与实验室测试(Lighthouse)的结合;Web Vitals JS API、Chrome UX Report(CrUX)、PerformanceObserver、Resource Timing;Vue/React 性能监控 SDK 接入。

5 分钟阅读
performance web-vitals core-web-vitals
frontend

TypeScript 工程化实战:从类型体操到架构安全

系统性 TypeScript 工程化指南:tsconfig 严格模式配置、高级类型体操(条件类型、映射类型、模板字面量、infer)、类型守卫与 Narrowing、泛型约束与协变逆变、类型安全边界(noUncheckedIndexedAccess、exactOptionalPropertyTypes)、monorepo 类型共享、API 类型自动同步(OpenAPI → TS)、品牌类型(Branded Types)与名义类型系统。附 Vue/React/Node.js 实战配置。

7 分钟阅读
typescript type-safety engineering
frontend

专题三:前端工程化与性能优化

前端工程化是保障大型项目可维护性与团队协作效率的系统性方法论。本专题从工程化体系出发,系统覆盖代码规范与 ESLint/Prettier 配置、Monorepo 架构与 pnpm workspace、Vite/Webpack/esbuild 构建工具深度解析、CI/CD 自动化流水线、Web 性能全栈优化(Core Web Vitals、RUM 真实用户监控、资源加载策略、图片/字体/代码分割优化)、浏览器缓存与 CDN 配置、Web 安全(CSP/CORS/XSS 防护)、前端测试(单元测试/E2E/视觉回归)、可访问性 a11y 与 PWA 渐进式 Web 应用,以及 Vue/React/Next.js/Astro 等框架的工程化最佳实践,打造企业级前端交付能力。

4 分钟阅读
frontend-engineering performance optimization
frontend

Vue 性能优化指南:虚拟列表、懒加载、渲染优化与 Core Web Vitals

Vue 3 应用性能优化完整策略:虚拟滚动(vue-virtual-scroller)、组件懒加载与异步组件、KeepAlive 缓存、Suspense 异步优化、v-memo 渲染记忆化、响应式性能(shallowRef/toRaw)、Bundle 分析与代码分割、虚拟 DOM 优化、编译时优化、网络优化、性能分析工具、大规模应用架构、以及 Core Web Vitals(LCP/INP/CLS)调优。

8 分钟阅读
vue performance optimization