我认为，工程化是前端各类细分技术领域中最为基础而关键，最具有知识广度与深度因而学习曲线较为陡峭，但同时也是对整体开发效率、质量增益最大因而对个体而言最具有学习价值的高阶技能之一。

在开源文化盛行的现代，多数时候我们都不必从零开始搭建一套软件系统，转而可以借助诸多开放的代码片段及其他资源更快速高效开发软件应用，这算的上软件工程发展史上一次巨大革命，因为它能大幅提升软件工业的生产效率，我们不必再从底层开始编写所有代码，大部分问题与常见的编程模式都能在社区找到相应的解决方案，且...

大家好，我是 范文杰，一个前端从业者，最近刚写完我的第一本小册《Webpack 核心原理与实践应用》，这对我是一个不小的职业突破，所以不能免俗地想做个总结，分享我这九年工作的成长经历，以及我对前端这个职业的思考与成长建议，希望能帮到哪些还在路上的朋友。

声明：本文所有观点均代表我个人意见，不代表公司、部门、团队立场/意见，关于内容的对错、价值观由读者自行判断，欢迎友好沟通探讨，希望能和而不同。

我从刚开始参加工作就经常有写东西的冲动，直到今年3月份才养成连续、有节奏的写作习惯，最近(截止2021-12-15) 已经累计输出28篇技术文章，月均3篇左右，全网阅读量合计 20w ，关注数 1w+，单看这数据平平无奇，但这事给我个人带来了很多收获：

Tree-Shaking 是一种基于 ES Module 规范的 Dead Code Elimination 技术，它会在运行过程中静态分析模块之间的导入导出，确定 ESM 模块中哪些导出值未曾其它模块使用，并将其删除，以此实现打包产物的优化。

全文 3000 字，欢迎点赞转发事情是这样的，某天有个小伙伴问我：为啥我的 webpack 运行完看不到我写的页面，而是：嗯？文件列表页？好吧，这种情况我似乎没遇到过，一下子没法给出答案，只能要来关键代码：重点看看 webpack.config.js 配置，用到 devServer + HMR 功能，其中：Webpack 版本为 5.37.0webpack-dev-server ...

我很早就意识到，能熟练、高效阅读开源前端框架源码是成为一个高级前端工程师必须具备的基本技能之一，所以在我职业生涯的最早期，就已经开始做了很多次相关的尝试，但结果通常都以失败告终，原因五花八门：

全文 3000 字，欢迎点赞关注转发从一张动图说起：上图应该大家经常使用的 错误诊断 功能，它能够在你编写代码的过程中提示，那一块代码存在什么类型的问题。这个看似高大上的功能，从插件开发者的角度看其实特别简单，基本上就是用上一篇文章《你不知道的 VSCode 代码高亮原理》中简单介绍过的 VSCode 开发语言特性的三...

全文 3000 字，欢迎点赞关注转发一、Vite 是什么2020年4月，尤大大发了这么一个推：随后，2021年2月，Vite 2.0 它来了，上来就是一套组合拳：基于 esbuild 实现的极速开发体验多框架支持兼容 Rollup 的插件机制与 APISSR 支持旧浏览器支持一开始我是拒绝的，从 grunt、gulp ，到 Webpack、Rollup、Snowpack 以及若干知名...

全文 6000 字，我们来聊聊打包闭环，欢迎点赞关注转发。回顾一下，在之前的文章《有点难的 webpack 知识点：Dependency Graph 深度解析》已经聊到，经过 构建(make)阶段 后，Webpack 解析出：module 内容module 与 module 之间的依赖关系图而进入 生成(seal)阶段 后，Webpack 首先根据模块的依赖关系、模块特性、entry配...

不知不觉，在 Segmentfault 已经写了4年文章，虽然一直不愠不火，没有如幻想的成为一呼百应的大佬，但也算是一直坚持学习，没有放弃过。借思否九周年之际，也跟风总结一下吧。

Esbuild 是一个非常新的模块打包工具，它提供了与 Webpack、Rollup、Parcel 等工具相似的资源打包能力，却有着高的离谱的性能优势：

全文5000字，解读 vscode 背后的代码高亮实现原理，欢迎点赞关注转发。Vscode 的代码高亮、代码补齐、错误诊断、跳转定义等语言功能由两种扩展方案协同实现，包括：基于词法分析技术，识别分词 token 并应用高亮样式基于可编程语言特性接口，识别代码语义并应用高亮样式，此外还能实现错误诊断、智能提示、格式化等功能...

全文 5000 字，深度剖析 Webpack Loader 的特性、运行机制、开发技巧，欢迎点赞关注。写作不易，未经作者同意，禁止任何形式转载！！！

在上一篇文章 有点难的 webpack 知识点：Chunk 分包规则详解 中，我们详细讲解了 Webpack 默认的分包规则，以及一部分 seal 阶段的执行逻辑，现在我们将按 Webpack 的执行流程，继续往下深度分析实现原理，具体内容包括：

而 Chunk 则是输出产物的基本组织单位，在生成阶段 webpack 按规则将 entry 及其它 Module 插入 Chunk 中，之后再由 SplitChunksPlugin 插件根据优化规则与 ChunkGraph 对 Chunk 做一系列的变化、拆解、合并操作，重新组织成一批性能(可能)更高的 Chunks 。运行完毕之后 webpack 继续将 chunk 一一写入物理文件中，完成...

Any time one file depends on another, webpack treats this as a dependency_. This allows webpack to take non-code assets, such as images or web fonts, and also provide them as _dependencies for your application.When webpack processes your application, it starts from a list of modules defined on th...

最近在学习 Webpack 源码，前前后后输出了 6 篇原理分析、工具分享类型的文章，过程中找到一些质量很高，值得一看的学习资料，所以熬夜整理了一波，希望对大家有帮助。

具体来说在我们项目中有一堆边缘节点，每个节点上部署一台强大的GPU服务器及N个网络摄像头，服务器持续记录摄像头的高清码流，同时跑模型持续分析视频内容；边缘服务器与数据中心之间有一条网络链路，但带宽非常小，通常只作数据、控制命令下发用；数据中心部署了一系列web服务，为不同用户提供审阅系统运行情况及发布操...

mxgraph 内部使用一种树形数据结构记录图形文档的内容，在内容树上，每一个节点代表一个图形元素，元素信息会被存储在节点对象上；节点的父子关系表示父节点图形包含子节点图形，可以用于实现图形的分层、分组功能。例如，对于下面的图形：

1. 目录说明 mxgraph 目录结构如下： docs: mxgraph 说明文档 dotnet: 基于 .net 的编辑器后端实现，暂时无需关注 etc/build: 这个目录下只有一份 Gruntfile.js 文件，用于构建生成环境版本 java: 基于 java 的编辑器后端实现，暂时无需关注 javascript: mxgraph 核心代码文件夹，其中 javascript/src 为框架源码；javas...

mxgraph 是一个很优秀的 SVG 图形引擎、图形编辑器，但框架官方提供的文档太过偏向学术，实用价值低；社区对 mxgraph 的讨论也很少，导致框架入门成本极高。本人计划在未来一年内不定期推出 mxgraph 的使用教程，感兴趣的同学欢迎关注，共同学习，共同成长。

关于实时视频传输，业界已经有非常多成熟方案，分别应用在不同需求场景。本文介绍一种基于 HTTP ，非常简单、易理解的方案，实用性不强，但有助于理解 HTTP 协议。

标量(ScalarTypeDefinition)是 GraphQL 中不可分割的原子数据类型，在服务中充当叶子节点。对于客户端而言，合法的查询集(Select Set)必须到达叶子节点，也就是到达标量类型节点。

在 GraphQL 中，接口(InterfaceTypeDefinition)也是一种命名字段集合，定义规则与对象类型极其相似，同样支持 字段名、类型、参数 三要素。与 OOP 概念类似，GraphQL 中的接口只是对资源的抽象描述，必须被其他对象类型实现，才能正常使用。我们来看个例子：

iview 在今年 7 月 28 号发布了 3.0.0 版本，大版本升级往往意味着功能、接口的大变更。虽然官网已经有长长的更新日志，但看起来还是有些抽象了，所以我决定做个新旧版本的比较，盘点新版本到底为我们带来了什么新特性。这是系列文章的第一篇，讲的是最简单的组件 —— Icon，希望能给大家带来帮助

iview 在今年 7 月 28 号发布了 3.0.0 版本，大版本升级往往意味着功能、接口的大变更。虽然官网已经有长长的更新日志，但看起来还是有些抽象了，所以我决定做个新旧版本的比较，盘点新版本到底为我们带来了什么新特性。这一篇给大家讲解的，是一个很常用的组件 —— Button

最近接触了一些面试者，当我问起“Vue 如何实现数据双向绑定”时，会脱口而出“数据劫持”，然后呢？然后就没有然后了╮(╯_╰)╭。确实，“数据劫持”是基础，但远不是面试官想听到的答案，不如花个十分钟看看本文，下次照着回答就好了

对大多数一个前端团队来说，Yeoman(简称yo)是一个非常值得学习的工具，它为前端项目提供了一种行之有效的方法，开发、分发、使用项目手脚架，提高项目启动速度，复用项目结构。