前端工程化

手写一个Webpack HMR插件——彻底搞懂热更新原理Webpack热更新是我们开发环境中人人皆知的基本能力，同时也是面试中比较频繁会问到的话题，那里你有没有想过整个过程是怎么实现的？

PNPM的原理实现pnpm 是一个快速、节省磁盘空间的 JavaScript 包管理器，通过硬链接共享依赖和软链接组织 node_modules 结构，比 npm 和 yarn 更高效。核心思想：是多个项目共用一个相同的依赖。

Workspace搭建Vue3+组件分离的Monorepo项目三种主流的代码仓库管理策略。它们代表了三种不同的哲学和工程实践，各有优劣，适用于不同的场景。上图是git在不同策略的维护代码的效果，Mono-Repo最终还是回归单个仓库。

前端模块化详解：CommonJS 与 ES Module 核心原理与面试指南在前端开发中，模块化是必不可少的重要概念。随着 JavaScript 生态的发展，CommonJS 和 ES Module 成为最主流的两种模块化方案。本文将深入剖析两者的核心原理，并通过典型面试题帮助大家彻底掌握模块化知识。

如何实现TypeScript级的polyfill自动引入在现代前端开发中，polyfill是确保代码在不同浏览器中兼容性的重要手段。传统的polyfill解决方案通常是在构建时解析JavaScript代码，通过检测特定方法调用来决定引入哪些polyfill。

微前端学习记录(qiankun、wujie、micro-app)不一定，任何技术都是取决于你的需求，过度设计反而导致程序更加糟糕，因为微前端并不是万能的，各个微前端框架都存在一些问题，甚至无法解决你的问题，如果你不知道自己是否需要微前端，那么大概率是不需要。

webpack打包优化Webpack 的优化点很多，可以分成构建速度优化和打包体积优化两大类。下面给你整理一份比较系统的清单：

奔跑的蜗牛ing

Vue3 + Element Plus 输入框省略号插件：零侵入式全局解决方案🚀 Vue3 + Element Plus 输入框省略号插件：零侵入式全局解决方案在日常开发中，我们经常会遇到输入框内容过长需要显示省略号的需求。传统的做法是在每个组件中手动添加样式和逻辑，但这种方式存在以下问题：

样式工程化：如何实现Design System对于样式的处理，我经历了好几个阶段，也对其中的琐碎、麻烦、相互干扰、不够工程化深恶痛绝，可以说这玩意就是我从后端开发转向全栈的一个拦路虎。好在我现在踩了很多坑，也算积累了一点经验了。

CI/CD学习记录（基于GitLab）首先来回忆一下之前是怎么发版的？仅有测试和正式两个环境的情况下，大致如下以上步骤，提交代码和合并代码其实还是比较省时的，但是构建和部署是需要花比较多的时间的也是比较容易出错的，尤其是比较大型的项目，那有没有办法让打包构建和部署，甚至是自动测试，交给一些工具来做呢？我们只需要提交代码，工具检测到代码变了，就自动帮我打包构建、自动化测试并部署到服务器。这样一来程序员就可以少干一些事情，同时也能达到一个快捷、稳定、可靠的效果。

如何通过前端工程自动生成字体图标各位网友晚上好，相信大家都知道字体图标。字体图标虽然有轻量、矢量、易调整、兼容性好等优点，但有一个重大缺陷就是维护比较麻烦。在过去我们在维护图标库时，往往需要专业的字体制作人员，制作出字体图标库后再给到前端，流程繁琐且不易协同。如今，借助前端工程化的能力，我们可以轻松实现 SVG 图标自动生成字体文件，极大提升了开发效率和可维护性。

薛定谔的猫2

前端工程化系列（一）：编码规范相关最近整理了一下自己在团队中实践并落地的编码规范相关内容，主要包含以下几类：命名规范是编程规范中最重要的一部分，它直接影响到代码的可读性和可维护性

【20250909】Vite构建优化指南本文主要对Vite比较常涉及的一些优化点/优化方向进行记录整理，方便后面查阅。我们需要借助一些工具来更直观的分析打包产物，推荐如下的几个Vite插件：

欧阳的棉花糖

微前端俯瞰在软件开发的世界里，有一个永恒的难题：如何让不断增长的系统保持可控？微前端正是为了解决这一挑战而诞生的架构理念。它不是凭空出现的"银弹"，而是前端技术发展到一定阶段的必然产物。

你不知道的pnpm！如果我的电脑上安装了nvm，切换node版本后，那么pnpm还会共享一个磁盘的npm包吗？先总个结：pnpm 的核心优势在于：速度极快、极其节省磁盘空间、能有效避免“幽灵依赖”问题，并且保证了安装的确定性。下面说说细节。

🚀前端环境变量配置：10个让你少加班的实战技巧还在为环境变量配置头疼？90%的前端开发者都踩过这些坑！凌晨1点，小李盯着屏幕上那个刺眼的undefined，欲哭无泪。生产环境的API地址为什么变成了undefined？明明本地测试一切正常！这个bug让他加班到深夜，也让他意识到：环境变量配置，这个看似简单的东西，藏着无数深坑。

🎯 UnoCSS终极速查表：这些原子类让你开发效率翻倍！还在为CSS样式烦恼吗？UnoCSS的原子化类名让你告别重复劳动！下面是一份超实用的UnoCSS常用类名速查表，收藏这一篇就够了！

如何使用Enhance构建App：后端优先框架指南本文介绍了 Enhance 框架，一个为简单和速度而设计的全栈框架。它与 Astro 等前端优先框架不同，Enhance 侧重于后端逻辑、API 端点和数据库交互。文章还演示了如何使用 Enhance 构建一个包含 SQLite 数据库的微型全栈 CRUD 应用程序，涉及数据库设置、API 功能、服务器构建和前端实现。

前端拿破轮

从零到一开发一个Chrome插件（一）大家好啊，我是前端拿破轮。作为一个前端工程师，Chrome在我们的工作中扮演着重要作用。它不仅是前端的主要运行环境，而且是我们代码调试的重要工具，也是平时学习生活使用的重要软件。

前端权限控制应该怎么做权限系统大概可以分为两类，一个是路由级的权限，也就是控制菜单的显示和隐藏，达到能不能看到菜单，进入页面的权限控制。另一个是按钮级别的权限，实现更精细的页面内的按钮或者组件的显示和隐藏的控制。