Latest

从前端“手工作坊”到“现代工厂”：前端工程化核心实践与演进思考 当我们谈论前端工程化时，它描绘的是一幅从无序到有序，从个人技艺到系统工程的进化图谱。这如同建造摩天大楼，不仅需要一砖一瓦的匠心（编码能力），更需要科学的规划设计（规范与设计）、高效的供应链管理（依赖与构建）、严谨的施工流程（自动化与部署）以及持续的健康监测（监控与优化）。本文旨在系统梳理前端工程化的核心支柱，并分享如何在项目演进中持续...

前端工程化是一个很大的词，就像让你去盖一栋楼，前期的规划设计，方案验证，再到原材料购买，协调人力，工期管理，验收交付等。可以发现前端开发从某种程度上来说，跟你去盖楼没啥本质区别，有时候你可能是需要盖一栋新楼（从 0 到 1 的新需求），而有时候你可能是需要在盖了一半的楼上继续施工（基于已有项目，再开发新功能），你也可能被安排去修修电路，管道啥的（修复一个已有问题）。 那么具体到前端工程化，有哪些我...

在公司真正的商业项目中，当前使用的都是 webpack,而我自己搞 demo 之类的，会更偏向于 vite 这种开箱即用的。那么这两个打包工具，究竟有哪些差异？我们在不同的场景下又应该如何抉择呢？ 一句话结论：如果没有企业级高复杂度打包定制需求，请直接选用 vite。 接下来我们再讨论几个细节： 它们的核心实现原理？webpack 是构建时打包（bundle-based），而 vite 是基于原生...

React 事件是什么？ React 事件是 React 框架对于浏览器原生事件的一层封装，称为合成事件，相当于一个事件综合处理系统。在页面上点击一个按钮时，浏览器会产生一个原生的事件，React 并不会给每一个按钮都加一个单独的监听器，而是在整个组件树的顶部（根 DOM 节点）设立一个调度中心。事件会冒泡到顶部，React 随后会创建一个合成事件对象，这个对象抹平了不同编辑器之间的差异，提供了一...

loader 是什么？ 是一个文件处理器 为什么需要 loader？ webpack本身只能处理 js 文件，而通过 loader 可以让 webpack 处理非 js 的文件（比如图片，css等），把它们变成可以识别和打包的模块。 它是如何工作的？ 1. 匹配文件：在配置中定义规则（如 test: /\.css$/），指定哪些文件由 loader 处理。 2. ​转换内容​：loader 是函数...