更多

前端工程化

前端工程化可以分成四个方面来说，分别为模块化、组件化、规范化和自动化。

笔记：

• 前端工程化-webpack入门

• 《从 0 到 1 实现一套 CI/CD 流程》学习笔记

• Docker入门学习笔记

• Jenkins前端自动化部署

• Github Actions自动部署

• Vercel部署笔记

• Vue+Node实现可视化部署工具

• rollup项目实践整理

• 前端打包工具

收藏：

• 前端构建这十年 (opens new window)

• 前端构建工具进化历程 (opens new window)

• 我是如何带领团队从零到一建立前端规范的？🎉🎉🎉 (opens new window)

• 基于NodeJS从零构建线上自动化打包工作流 (opens new window)、h5-Dooring (opens new window)

• 前端本地化部署 (opens new window)

• 前端工程化配置指南 (opens new window)

• 如何通过 Git 和 Husky 添加提交钩子并实现代码任务自动化 (opens new window)

• 再也不用手动改package.json的版本号 (opens new window)

• 作为前端 leader，怎么快速搭建多环境CICD自动化部署？ (opens new window)

• 实现前后端全自动化部署，解放你的双手。——从零开始搭建一个高颜值后台管理系统全栈框架(五) (opens new window)

• 前端 DevOps（前端小兵成长营） (opens new window)

• 前端 DevOps（ 程序员成功） (opens new window)

• 从零到亿系统性的建立前端构建知识体系✨（开篇） (opens new window)

• 前端项目构建最佳实践 (opens new window)

• Vue3+TS+Node打造个人博客（总览篇） (opens new window)

  • 在 CI/CD 中怎么使用 Docker 部署前端项目？ (opens new window)
  • 前端上手全栈自动化部署，让你看起来像个“高手” (opens new window)
  • 花半天时间，轻松打造前端CI/CD工作流 (opens new window)

• 我把大型团队项目从 vite 前端迁移到了 rsbuild，收益如何？ (opens new window)

• 前端部署后自动提醒用户更新 (opens new window)

• 2024年细讲前端工程化（万字年终总结）冲冲冲 (opens new window)

• 如何在前端开发中实现零停机部署 (opens new window)

• Monorepo

  • 现代前端工程化-彻底搞懂基于 Monorepo 的 lerna 模块(从原理到实战) (opens new window)
  • Monorepo，大型前端项目管理模式实践 (opens new window)
  • React Native工程Monorepo改造实践 (opens new window)
  • 为什么 pnpm+monorepo 是组件库项目的最佳实践 (opens new window)
  • 前端cli + 通用前端项目cicd设计 (opens new window)

• Docker&Jekins

  • [Jenkins进阶]-前端CI/CD (opens new window)

  • Docker 边学边用 (opens new window)

  • 0基础实现项目自动化部署 (opens new window)

  • 写给前端的 Docker 入门终极指南，别再说不会用 Docker 了！ (opens new window)

  • 从零搭建docker+jenkins+node.js自动化部署环境 (opens new window)

  • Docker+Nginx+Jenkins实现前端自动化部署 (opens new window)

  • 解析Node.js镜像原理，轻松构建高效CI/CD流程 (opens new window)

  • 基于jenkins+docker实现CI/CD (opens new window)

  • 队友升职，被迫解锁 Jenkins（所以，前端需要学习Jenkins吗？🤔） (opens new window)

  • 轻松部署与管理应用：从 Docker 到 Kubernetes 的最佳实践 (opens new window)

• Gitlab

  • 教程：创建并运行你的第一个 GitLab CI/CD 管道 (opens new window)
  • Gitlab-ci:从零开始的前端自动化部署 (opens new window)
  • 手摸手教你docker+jenkins+gitlab部署你的vue前端项目 (opens new window)
  • 基于gitlab+k8s(container)实现CI/CD (opens new window)

Web性能优化

• 你知道的前端优化手段 (opens new window)

• ESModule 系列 (二)：构建下一代基础设施 PDN (opens new window)

• 🐢11s到⚡1s，性能优化之首屏加载🚀 (opens new window)

• 雅虎前端优化的35条军规 (opens new window)

• 边缘渲染是如何提高前端性能的？ (opens new window)

• 使用 Performance 看看浏览器在做什么 (opens new window)

• Web Worker

  • 如何让前端拥有后端的计算能力？一文彻底了解Web Worker (opens new window)
  • 梳理 Web Worker 及实战场景 (opens new window)
  • 2023 年的 Web Worker 项目实践 (opens new window)
  • SharedWorker:第一次弃用了 Web Worker ，因为它救不了我 (opens new window)
  • 把 Canvas 放到 WebWorker 中去绘制？想都不敢想有多爽！ (opens new window)

• 前端性能优化到底该怎么做（上）— 开门见山 (opens new window)、前端性能优化到底该怎么做（下）— 直捣黄龙 (opens new window)

• 浏览器层面优化前端性能(1):Chrom组件与进程/线程模型分析 (opens new window)

• 一个前端非侵入式骨架屏自动生成方案 (opens new window)

• 3.40秒到231.84毫秒，我用Performance面板分析性能瓶颈全流程 (opens new window)

• 【译】构建更快的 Web 体验 - 使用 postTask 调度器 (opens new window)

• 首页加载速度优化 (opens new window)

• 网页疯狂自动刷新，发生了什么？业务：我传了一张两亿像素的图片而已 (opens new window)

• 【前端架构】大厂都在做的前端稳定性到底是啥呢？ (opens new window)

• 从0到1：美团端侧CDN容灾解决方案 (opens new window)

• 性能优化——你的瀑布流还不够懒 (opens new window)

• 前端性能优化的几个大招（理论+实践，看完就是Leader水平） (opens new window)

• 一份完整的「前端性能优化」手册 (opens new window)

• 如何回答「千万级Tree组件」封装问题？ (opens new window)

浏览器原理相关：

• 浏览器和图形引擎渲染对比 (opens new window)
• 浏览器渲染原理 (opens new window)
• 重排、重绘、合成，你真的懂吗？ (opens new window)
• 渲染树的形成原理你真的很懂吗？ (opens new window)
• 图解浏览器的多进程渲染机制 (opens new window)
• 浏览器节能机制导致Websocket断连的坑 (opens new window)

监控相关

笔记：

• 前端监控学习笔记

• 监控埋点调研报告

收藏：

• 说说前端监控平台/监控SDK的架构设计和难点亮点？ (opens new window)

• Dom快照录制: 还原现场🔍前端录制用户行为技术方案 (opens new window)

• 新一代性能指标 Web Vitals (opens new window)

• 应用性能前端监控，字节跳动这些年经验都在这了 (opens new window)

• vue项目你一定会用到的性能优化！ (opens new window)

• 「历时8个月」10万字前端知识体系总结（工程化篇）🔥 (opens new window)

• 从0到1搭建前端监控平台 (opens new window)

• 什么？原来前端错误上报这么简单！！ (opens new window)

• 如何实现埋点日志精准监控 (opens new window)

• 前端小玩具~错误捕获定位工具 (opens new window)

• 前端性能优化 - 提升 LCP（Largest Contentful Paint） (opens new window)

• 前端监控SDK：从基础到实践 （1. 性能监控） (opens new window)

• 迈向前端 Leader - 落地前端监控 (opens new window)

• 前端架构-前端监控sdk设计与实现（完整版） (opens new window)

• Sentry 都不想接，这锅还让我背？这xx工作我不要了！ (opens new window)

• 【性能监控】别只做工具人了！手把手带你写一个前端性能检测SDK (opens new window)

Node

• nodejs常见问题 (opens new window)

• 看了就会的 Node.js 常用三方工具包 (opens new window)

• 为什么 Node 应用要用 PM2 来跑？ (opens new window)

• 用 Node.js 手写 WebSocket 协议 (opens new window)、前后端实时双向通信WebSocket技术 (opens new window)

• 什么，你连一个Node.js脚本都不会写！！！ (opens new window)

• Node.js + typescript 写一个命令批处理辅助工具 (opens new window)

• 如何检查前端项目和node项目中未被使用的依赖包 (opens new window)

• 前端要想学好 NodeJs，这些性能监控指标可不能不会！！！ (opens new window)

• 为什么选择Nestjs作为服务端框架，而不是Express？ (opens new window)

Nginx

• 手撸架构，Nginx 40问 (opens new window)

• Nginx的这些妙用，你肯定有不知道的！ (opens new window)

• 超越 Nginx！号称下一代 Web 服务器，用起来够优雅！ (opens new window)

• Nginx 简单入门指北不指南 (opens new window)

• Nginx一网打尽：动静分离、压缩、缓存、黑白名单、跨域、高可用、性能优化... (opens new window)

• 作为前端开发，感受下 nginx 带来的魅力！🔥🔥 (opens new window)

• 前端应该掌握的Nginx相关的内容 (opens new window)

• 前端性能优化-开启 HTTP 缓存 (opens new window)

• 每个前端开发者都应该掌握的 nginx 技巧 (opens new window)

低代码

笔记：

• 低代码平台搭建实战
• B端低码平台的实践与思考

收藏：

• 前端低代码平台-CodeFun (opens new window)

• 低代码都做了什么？(为什么？怎么实现Low-Code？) (opens new window)

• 从零开发一款可视化大屏制作平台 (opens new window)

• 低代码多分支协同开发的建设与实践 (opens new window)

• 推荐20个开源的前端低代码项目 (opens new window)

• 前端架构设计优化：构建可扩展的低代码平台 (opens new window)

• 实战，一个高扩展、可视化低代码前端，详实、完整 (opens new window)

• 低码编辑器中的“拖拽”是如何实现的 (opens new window)

• 老板：给你20天，写一个可拖拽动态表单生成器 (opens new window)

• marsview (opens new window)

  • 使用Nest+LangChain给低代码平台赋上AI代码生成能力，让低代码变成低低代码！ (opens new window)
  • github-marsview (opens new window)、langchainjs (opens new window)
  • marsview梳理

微前端

• 微前端服务

• 完美搭配，微前端与Monorepo的架构设计 (opens new window)

• Rspack、Vite争先支持的模块联盟(MF)究竟是啥？ (opens new window)

• 模块联邦（Module Federation）新的微前端方案？ (opens new window)

• 微前端集成优化：让所有子应用体积更小，加载更快！ (opens new window)

• qiankun？这次我选了wujie！ (opens new window)

• Qiankun微前端 + Turborepo + pnpm 实践 (opens new window)

组件库

笔记：

• 使用vite开发一个自己的Vue3组件库
• 从0到1搭建Monorepo组件库
• 关于虚拟列表的组件封装

收藏：

• 想要开发组件库？那你一定要提前了解一下这个神器 (opens new window)

• 通用组件的设计需要考虑什么 (opens new window)

• 使用 Next.js 搭建 Monorepo 组件库文档 (opens new window)

• 前端组件性能怎么测？从场景设计到 CI 接入的 11 步 SOP (opens new window)

SSR

• 前端搜索引擎优化（SEO）的技巧 (opens new window)

• 服务端渲染SSR及实现原理 (opens new window)

• 教你使用 koa2 + vite + ts + vue3 + pinia 构建前端 SSR 企业级项目 (opens new window)

• 走近 Next.js：全栈框架的简介与应用 (opens new window)

• 前端页面秒开的关键 - 小白也能看懂的同构渲染原理和实现（含nodejs服务端测试与优化，附PPT） (opens new window)

• 一文彻底说清楚SSR渲染 (opens new window)

跨端

笔记：

• 前端跨端技术调研报告

• taro开发实操笔记

• Flutter学习笔记

收藏：

• 跨端技术的本质是什么？现状如何？ (opens new window)
• Taro 源码揭秘：11. Taro 项目开发编译速度太慢，怎么办？写个简单插件按需编译 (opens new window)

工具库

• 动画库：animejs (opens new window)

• 行业领先的 Web 3D 引擎：Galacean Engine (opens new window)

其他

笔记：

• 前端登录相关知识梳理

• Turbopack初印象

收藏：

• 万字详文：彻底搞懂 Jest 单元测试框架 (opens new window)

• 别卷了，快来玩 | React+Lingo 实现一个超好玩的3D游戏：美女与龙珠 (opens new window)

• 前端新宠 Svelte 带来哪些新思想？赶紧学起来！ (opens new window)

• Web Component 探索之旅 (opens new window)

• 前端 mock 数据的几种方式 (opens new window)

• 走进 WebAssembly 的世界 (opens new window)

• 物理世界的互动之旅：Matter.js入门指南 (opens new window)

• 写给5年前端妹子的三万字脚手架教程 (opens new window)

• react + vite + node: fluxy-admin后台管理系统开发记录 (opens new window)

• 在线代码编辑器：

  • 历经四个月，我们开源了一个协同的在线代码编辑器，还支持执行 Node 项目哦！ (opens new window)、Web Worker没有使用场景？那只是你没有用到而已 (opens new window)、online-edit-web (opens new window)

  • 开发一个纯前端在线代码编辑器、制作一个炫酷动画收藏网站 (opens new window)、online-snippet-editor (opens new window)

  • 多人在线协作的神秘代码：Yjs 底层解密 (opens new window)

  • 一杯茶时间带你基于 Yjs 和 reactflow 构建协同流程图编辑器 (opens new window)

• npm相关：

  • 图文结合简单易学的npm包的发布流程 (opens new window)
  • 包管理工具的演进（npm,yarn,pnpm） (opens new window)
  • 如果一个NPM包部分功能不满足需求，如何修改其部分功能 (opens new window)
  • What？你还不明白npm, yarn, pnpm之间的区别？！ (opens new window)

• 构建 Node.js 云函数的 Serverless 框架: Midway.js探索与实践 (opens new window)

• 版本更新：

  • 纯前端怎么实现检测版本更新，看这一篇就够了！ (opens new window)
  • SharedWorker项目实践——纯前端检测版本更新 (opens new window)、2种纯前端检测版本更新提示 (opens new window)
  • 纯前端实现检测版本发布更新提示 (opens new window)
  • 只有前端 Leader 才会告诉你：那些年踩过的模块加载失败的坑 (opens new window)

• 内网穿透：

  • 内网穿透你真的了解吗？ (opens new window)
  • 用闲置的阿里云服务器使用 NPS 实现内网穿透 (opens new window)
  • 弃用花生壳，改用frp实现内网穿透，好自由！ (opens new window)

• 如何使用esMap快速搭建室内场景 (opens new window)

• 系统设计：设计URL短链接工具 (opens new window)

• 【爬虫逆向】逆向破解某租车微信小程序，sign的解析 (opens new window)

• Tesseractjs：OCR 前端识别提取图像文本字符 支持 100+ 种语言 (opens new window)

• 前端 SEO 优化：全面提升网站可见度的策略指南 (opens new window)

• 权限：

  • 写个vite插件自动处理系统权限，降低99%重复工作 (opens new window)
  • 用二进制思维重构前端权限系统 (opens new window)

• 为了让 iframe 支持 keepAlive，我连夜写了个 kframe (opens new window)

• 国际化：

  • 前端国际化全场景支持方案，不入侵代码，一键完成 (vue2/3、react) (opens new window)
  • 三行代码完成国际化适配，别等错过了才后悔没收藏！ (opens new window)

• 大模型应用中，前端绕不开的 SSE (opens new window)

• 因网速太慢我把20M+的字体压缩到了几KB (opens new window)